This script is not very flexible either.
The problem is, you have to calculate almost everything by hand.
I put all the styles in the <style> element except "top".
The "top" attribute must be declared in the div elements.
"top" for the first div element is set to 150px.
The value for the space between each div element is stored in var sSpace.
I have it set to 5.
To calculate the "top" attribute for each successive div element, add the height and sSpace values to the "top" attribute of the previous div element.
Example:
First div element "top" attribute equals 150px.
Second div element "top" attribute equals 150 + height (20) + sSpace (5) equals 175px.
Third div element "top" attribute equals 175 + height (20) + sSpace (5) equals 200px.
Fourth div element "top" attribute equals 200 + height (20) + sSpace (5) equals 225px.
Fifth div element "top" attribute equals 225 + height (20) + sSpace (5) equals 250px.
If you change the height and/or sSpace then you must recalculate the "top" attributes.
Note: The height of the div elements can not be less than 19px.
If you try to make the height less than 19px , then it will be set to 19px.
Unfortunately this problem exists somewhere in the wz_dragdrop.js script.
HTML Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Drag, Snap and Sort</title>
<link rel="stylesheet" type="text/css" href="../../newwalterzorn.css">
<style>
.commonStyle
{
position:absolute;
left:100px;
width:200px;
height:20px;
}
#lyr0{background:red;}
#lyr1{background:green;}
#lyr2{background:blue;}
#lyr3{background:yellow;}
#lyr4{background:purple;}
</style>
</head>
<body>
<script type="text/javascript" src="wz_dragdrop.js"></script>
<p align="center"><b><big>Sort Draggable Elements</big><br>and let them snap to predefined positions</b></p>
<p align="center"><a href="demos.htm" target="_top">Back, Zurück</a></p>
<div class="commonStyle" id="lyr0" style="top:150px;"></div>
<div class="commonStyle" id="lyr1" style="top:175px;"></div>
<div class="commonStyle" id="lyr2" style="top:200px;"></div>
<div class="commonStyle" id="lyr3" style="top:225px;"></div>
<div class="commonStyle" id="lyr4" style="top:250px;"></div>
<script type="text/javascript">
<!--
SET_DHTML(CURSOR_MOVE, "lyr0", "lyr1", "lyr2", "lyr3", "lyr4");
var sSpace = 5;
var sObj = document.getElementById("lyr0");
var sTop = parseInt(sObj.style.top.substr(0,sObj.style.top.length-2));;
var sHeight = parseInt(sObj.style.height.substr(0,sObj.style.height.length-2));
var sLeft = parseInt(sObj.style.left.substr(0,sObj.style.left.length-2));
var dy = sHeight+sSpace;
var posOld;
// Array intended to reflect the order of the draggable items
var aElts = [dd.elements.lyr0, dd.elements.lyr1, dd.elements.lyr2, dd.elements.lyr3, dd.elements.lyr4];
function my_PickFunc()
{
// Store position of the item about to be dragged
// so we can interchange positions of items when the drag operation ends
posOld = dd.obj.y;
}
function my_DropFunc()
{
// Calculate the snap position which is closest to the drop coordinates
var y = dd.obj.y+dy/2;
y = Math.max(sTop, Math.min(y - (y-sTop)%dy, sTop + (aElts.length-1)*dy));
// Index of the new position within the spatial order of all items
var i = (y-sTop)/dy;
// Interchange the positions of the two items
aElts[i].moveTo(sLeft, posOld);
// Let the dropped item snap to position
dd.obj.moveTo(sLeft, y);
// Update the array according to the changed succession of items
aElts[(posOld-sTop)/dy] = aElts[i];
aElts[i] = dd.obj;
}
//-->
</script>
</body>
</html>