|
Title: Drag & Drop to multiple destination script Post by: Mith on September 17, 2007, 04:33:49 PM Hi,
I'm using a modified version of drag-drop-custom from dhtml goodies. The code is shown below: Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <HTML> <HEAD> <title>Demo 2: Drag and drop</title> <link rel="stylesheet" href="css/demos.css" media="screen" type="text/css"> <style type="text/css"> /* CSS for the demo. CSS needed for the scripts are loaded dynamically by the scripts */ #mainContainer{ width:600px; margin:0 auto; margin-top:10px; border:1px solid #000; padding:2px; } #capitals{ width:200px; float:left; border:1px solid #000; background-color:#E2EBED; padding:3px; height:400px; } #countries{ width:300px; float:right; margin:2px; height:400px; } .dragableBox,.dragableBoxRight{ width:80px; height:20px; border:1px solid #000; background-color:#FFF; margin-bottom:5px; padding:10px; font-weight:bold; text-align:center; } div.dragableBoxRight{ height:65px; width:110px; float:left; margin-right:5px; padding:5px; background-color:#E2EBED; } .dropBox{ width:190px; border:1px solid #000; background-color:#E2EBED; height:400px; margin-bottom:10px; padding:3px; overflow:auto; } a{ color:#F00; } .clear{ clear:both; } img{ border:0px; } </style> <script type="text/javascript" src="js/drag-drop-custom.js"></script> </head> <body> <div id="header"><a href="/index.html"><img src="/images/heading3.gif"></a></div> <div id="mainContainer"> <h2>Drag and drop - demo 3</h2> <div class="konaBody"> This is an example of how you can use this script to create your own "drag'n drop applications". </div> <div id="capitals"> <p><b>Capitals</b></p> <div id="dropContent"> <div class="dragableBox" id="box1">Oslo</div> <div class="dragableBox" id="box2">Stockholm</div> <div class="dragableBox" id="box3">Washington</div> <div class="dragableBox" id="box4">Copenhagen</div> <div class="dragableBox" id="box5">Seoul</div> <div class="dragableBox" id="box6">Rome</div> <div class="dragableBox" id="box7">Madrid</div> </div> </div> <div id="countries"> <div id="box106" class="dragableBoxRight">Italy</div> <div id="box107" class="dragableBoxRight">Spain</div> <div id="box101" class="dragableBoxRight">Norway</div> <div id="box104" class="dragableBoxRight">Denmark</div> <div id="box105" class="dragableBoxRight">South Korea</div> <div id="box102" class="dragableBoxRight">Sweden</div> <div id="box103" class="dragableBoxRight">United States</div> </div> <div class="clear"></div> <div class="konaBody"></div> </div> <div id="debug"></div> <script type="text/javascript"> // Custom drop action for the country boxes function dropItems(idOfDraggedItem,targetId,x,y) { var targetObj = document.getElementById(targetId); // Creating reference to target obj var subDivs = targetObj.getElementsByTagName('DIV'); // Number of subdivs if(subDivs.length>0 && targetId!='capitals')return; // Sub divs exists on target, i.e. element already dragged on it. => return from function without doing anything var sourceObj = document.getElementById(idOfDraggedItem); // Creating reference to source, i.e. dragged object var numericIdTarget = targetId.replace(/[^0-9]/gi,'')/1; // Find numeric id of target var numericIdSource = idOfDraggedItem.replace(/[^0-9]/gi,'')/1; // Find numeric id of source if(numericIdTarget-numericIdSource==100;numericIdTarget-numericIdSource==200){ // In the html above, there's a difference in 100 between the id of the country and it's capital(example: // Oslo have id "box1" and Norway have id "box101", i.e. 1 + 100. sourceObj.style.backgroundColor='#0F0'; // Set green background color for dragged object } else{ sourceObj.style.backgroundColor=''; // Reset back to default white background color } if(targetId=='capitals'){ // Target is the capital box - append the dragged item as child of first sub div, i.e. as child of <div id="dropContent"> targetObj = targetObj.getElementsByTagName('DIV')[0]; } targetObj.appendChild(sourceObj); // Append } var dragDropObj = new DHTMLgoodies_dragDrop(); // Creating drag and drop object // Assigning drag events to the capitals dragDropObj.addSource('box1',true); // Make <div id="box1"> dragable. slide item back into original position after drop dragDropObj.addSource('box2',true); // Make <div id="box2"> dragable. slide item back into original position after drop dragDropObj.addSource('box3',true); // Make <div id="box3"> dragable. slide item back into original position after drop dragDropObj.addSource('box4',true); // Make <div id="box4"> dragable. slide item back into original position after drop dragDropObj.addSource('box5',true); // Make <div id="box4"> dragable. slide item back into original position after drop dragDropObj.addSource('box6',true); // Make <div id="box4"> dragable. slide item back into original position after drop dragDropObj.addSource('box7',true); // Make <div id="box4"> dragable. slide item back into original position after drop // Assigning drop events on the countries dragDropObj.addTarget('box101','dropItems'); // Set <div id="leftColumn"> as a drop target. Call function dropItems on drop dragDropObj.addTarget('box102','dropItems'); // Set <div id="leftColumn"> as a drop target. Call function dropItems on drop dragDropObj.addTarget('box103','dropItems'); // Set <div id="leftColumn"> as a drop target. Call function dropItems on drop dragDropObj.addTarget('box104','dropItems'); // Set <div id="leftColumn"> as a drop target. Call function dropItems on drop dragDropObj.addTarget('box105','dropItems'); // Set <div id="leftColumn"> as a drop target. Call function dropItems on drop dragDropObj.addTarget('box106','dropItems'); // Set <div id="leftColumn"> as a drop target. Call function dropItems on drop dragDropObj.addTarget('box107','dropItems'); // Set <div id="leftColumn"> as a drop target. Call function dropItems on drop dragDropObj.addTarget('capitals','dropItems'); // Set <div id="leftColumn"> as a drop target. Call function dropItems on drop dragDropObj.init(); // Initizlizing drag and drop object </script> </body> </html> What i'm trying to do is have the ability for any 2 draggable boxes to have 2 simulataneous destinations. Currently the code is designed so that box with id 15 say can only have a destination drop that is 100 points greater than the id - so in this case destination box id=115. I'd like to be able to have boxes with id 14 OR 15 to be able to be dropped to box 114 OR 115 and vice versa... Please help! Title: Re: Drag & Drop to multiple destination script Post by: VGR on September 18, 2007, 03:32:12 PM well, first it's either +100 or +200 (don't ask me why, I saw this is seconds only) :
Code: if(numericIdTarget-numericIdSource==100;numericIdTarget-numericIdSource==200) if you want to chnge this behaviour, I suggest you start using custom TDTD attributes so that "draggable" comes from an attribute YOU set, not from an id=originator_id+100 [or 200] changing the code shouldb't be too hard. Just think twice what you do want, and in case of worries come back here with details. regards
Powered by SMF 1.1 RC2 |
SMF © 2001-2005, Lewis Media
Joomla Bridge by JoomlaHacks.com |