Results 1 to 6 of 6

Thread: Drag&Drop together with a layer

  1. #1
    Join Date
    Dec 2006
    Posts
    38
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Unhappy Drag&Drop together with a layer

    1) Script Title: DOM Drag&Drop script

    2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex11/domdrag/

    3) Describe problem:
    link: http://www.easyto.eu/drag-test.htm

    Is it possible to move the layer (in this case is a button) together with a map?
    Please help, if there are any other ways to make it? Or somehow to fastened it to the certain place in the map?
    Last edited by lelu; 04-01-2007 at 02:51 PM. Reason: adding a question

  2. #2
    Join Date
    Jul 2006
    Location
    Canada
    Posts
    2,581
    Thanks
    13
    Thanked 28 Times in 28 Posts

    Default

    Add this to the map event handler
    Code:
    function movewith(obj,objmove) {
    var ob1 = document.getElementById(obj),
    obj2 = document.getElementById(objmove);
    obj2.style.left=obj1.offsetLeft+"px";
    obj2.style.top=obj1.offsetTop+"px";
    }
    //on the event handler: movewith("handle","dam5.jpg")
    - Mike

  3. #3
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,496
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
    <title>New Page 1</title>
    <style type="text/css">
    #example {
    position:relative;
    width:875px;
    }
    #layer1 {
    position:absolute;
    width:100px;
    height:100px;
    z-index:1;
    left:332px;
    top:150px;
    }
    </style>
    <script type="text/javascript" src="dom-drag.js"></script>
    </head>
    <body>
    <div id="example">
    <div id="layer1">
    <img alt="" src="sights-button.gif" width="39" height="40">
    </div>
    <img src="austria/map-wien.gif" alt="">
    </div>
    <script type="text/javascript">
    Drag.init(document.getElementById("example"));
    </script>
    <div>
    <img alt="" src="austria/map-wien.gif" width="875" height="638">
    </div>
    </body>
    </html>
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  4. #4
    Join Date
    Dec 2006
    Posts
    38
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Thank you very much, it works. But one weird thing... it can not recognize the "layer2"? It works only for layer 1 and 3.

    http://www.easyto.eu/drag-test.htm


    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
    <title>New Page 1</title>
    <style type="text/css">
    #example {
    position:relative;
    width:875px;
    }
    #layer1 {
    position:absolute;
    width:100px;
    height:100px;
    z-index:1;
    left:332px;
    top:150px;
    }
    </style>
    <script type="text/javascript" src="dom-drag.js"></script>
    </head>
    <body>

    <div id="example">
    <div id="layer1" style="position: absolute; left: 295px; top: 100px; width: 37px; height: 40px">
    <img alt="" src="sights-button.gif" width="39" height="40">
    </div>

    <div id="example">
    <div id="layer2" style="position: absolute; left: 399px; top: 95px; width: 37px; height: 40px">
    <img alt="" src="sights-button.gif" width="39" height="40">
    </div>

    <div id="example">
    <div id="layer3" style="position: absolute; left: 529px; top: 96px; width: 37px; height: 40px">
    <img alt="" src="sights-button.gif" width="39" height="40">
    </div>

    <img src="austria/map-wien.gif" alt="">
    </div>
    <script type="text/javascript">
    Drag.init(document.getElementById("example"));
    </script>
    <div>
    &nbsp;</div>
    </body>
    </html>
    Last edited by lelu; 04-01-2007 at 03:56 PM.

  5. #5
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,496
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    You can only have one element on a page with a given id. If you want more than one dragable element, you need to give each one a unique id and initialize them separately to the script. Also, in your layout, any element that you wish to have move with a given dragable element, must be contained in that dragable element.

    From my original example:

    Code:
    <div id="example"> <!-- only one element with id 'example' -->
    <div id="layer1"> <!-- this element is contained in the dragable 'example' element -->
    <img alt="" src="sights-button.gif" width="39" height="40">
    </div>
    <img src="austria/map-wien.gif" alt=""> <!-- this element is contained in the dragable 'example' element -->
    </div>
    <script type="text/javascript">
    Drag.init(document.getElementById("example")); //initialization for 'example' element
    </script>
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  6. #6
    Join Date
    Dec 2006
    Posts
    38
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Thank you so very much for explanations !!!
    it works!!!

Bookmarks

Posting Permissions

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