Hello and welcome to our community! Is this your first visit?
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    Regular Coder
    Join Date
    Jun 2002
    Thanked 4 Times in 4 Posts

    walter zorn drag Q

    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

  • #2
    Regular Coder
    Join Date
    Jun 2002
    Thanked 4 Times in 4 Posts
    it's dy variable=size of div, I got it
    thanks anyway


    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts