View Full Version : walter zorn drag Q

02-08-2007, 07:36 PM
Referring to this nice script
his example

I used the same page as the creator BUT I attempted to alter it to 75 variables(crazy, yeah I know)

It doesn't re-place right
Can ya tell me where I goofed?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<title>Drag, Snap and Sort</title>
<script type="text/javascript" src="wz_dragdrop.js"></script>
<p align="center">
and let them snap to predefined positions
<p align="center">
<div id="lyr0" style="position:absolute;left:100px;top:150px;width:200px;height:20px;background:#CCCCCC;border:1;"> LaDainian Tomlinson </div>
<div id="lyr1" style="position:absolute;left:100px;top:170px;width:200px;height:20px;background:#CCCCCC;border:1;"> Larry Johnson </div>
<div id="lyr2" style="position:absolute;left:100px;top:190px;width:200px;height:20px;background:#CCCCCC;border:1;"> Steven Jackson </div>
<div id="lyr3" style="position:absolute;left:100px;top:210px;width:200px;height:20px;background:#CCCCCC;border:1;"> Brian Westbrook </div>
<div id="lyr4" style="position:absolute;left:100px;top:230px;width:200px;height:20px;background:#CCCCCC;border:1;"> Shaun Alexander </div>
<div id="lyr5" style="position:absolute;left:100px;top:250px;width:200px;height:20px;background:#CCCCCC;border:1;"> Frank Gore </div>
<div id="lyr6" style="position:absolute;left:100px;top:270px;width:200px;height:20px;background:#CCCCCC;border:1;"> Reggie Bush </div>
<div id="lyr7" style="position:absolute;left:100px;top:290px;width:200px;height:20px;background:#CCCCCC;border:1;"> Maurice Jones-Drew </div>
***snip***;height:20px;background:#CCCCCC;border:1;"> Adrian Peterson</div>
<div id="lyr75" style="position:absolute;left:100px;top:1650px;width:200px;height:20px;background:#CCCCCC;border:1;"> Michael Robinson</div>

<script type="text/javascript">

SET_DHTML(CURSOR_MOVE, "lyr0", "lyr1", "lyr2", "lyr3", "lyr4", "lyr5", "lyr6", "lyr7", "lyr8", "lyr9", "lyr10", "lyr11", "lyr12", "lyr13", ***snip***"lyr64", "lyr65", "lyr66", "lyr67", "lyr68", "lyr69", "lyr70", "lyr71", "lyr72", "lyr73", "lyr74", "lyr75");

var dy = 70;
var margTop = 150;
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, dd.elements.lyr5, dd.elements.lyr6, dd.elements.lyr7, dd.elements.lyr8, dd.elements.lyr9, dd.elements.lyr10, dd.elements.lyr11, ***snip***dd.elements.lyr68, dd.elements.lyr69, dd.elements.lyr70, dd.elements.lyr71, dd.elements.lyr72, dd.elements.lyr73, dd.elements.lyr74, dd.elements.lyr75];

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(margTop, Math.min(y - (y-margTop)%dy, margTop + (aElts.length-1)*dy));

// Index of the new position within the spatial order of all items
var i = (y-margTop)/dy;

// Interchange the positions of the two items
aElts[i].moveTo(100, posOld);

// Let the dropped item snap to position
dd.obj.moveTo(100, y);

// Update the array according to the changed succession of items
aElts[(posOld-margTop)/dy] = aElts[i];
aElts[i] = dd.obj;

I snipped repetitive code in a few spots

02-08-2007, 07:54 PM
it's dy variable=size of div, I got it
thanks anyway