I'm using a modified version of drag-drop-custom from dhtml goodies. The code is shown below:
<!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...
