www.webdeveloper.com
Results 1 to 2 of 2

Thread: Completely random order drag n drop with HTML5 (only)

Hybrid View

  1. #1
    Join Date
    Feb 2013
    Location
    San Diego, CA
    Posts
    3

    Completely random order drag n drop with HTML5 (only)

    Hello there fine people. Can you do random drag n drop with only HTML5? I made two draggable areas with 5 icons I would like people to be able to drag back and forth all over the place. Unfortunately if I take the 3rd icon and try and drop it first into the 2nd draggable area, the page reorders it for me and displays the 1st icon and not the 3rd like I wanted it to. Not real sure what to do about this. And once you try and drag them back and forth more than once....the behavior gets real weird.

    Here's the example: http://psyllex.com/testing/dragndrop.html

    Here's the code:
    Code:
    <!DOCTYPE HTML>
    <html>
    <head>
    <style type="text/css">
    #wrap{width: 99%; margin: 45px auto; text-align: center;}
    #div1 {width:1000px;height:130px;padding:10px;border:3px solid #aaaaaa; margin: 20px auto 20px auto; text-align: left;}
    #div2 {width:1000px;height:130px;padding:10px;border:3px solid #aaaaaa; margin: 20px auto 20px auto; text-align: center;}
    
    </style>
    <script>
    function allowDrop(ev)
    {
    ev.preventDefault();
    }
    
    function drag(ev)
    {
    ev.dataTransfer.setData("Text",ev.target.id);
    }
    
    function drop(ev)
    {
    ev.preventDefault();
    var data=ev.dataTransfer.getData("Text");
    ev.target.appendChild(document.getElementById(data));
    }
    </script>
    </head>
    <body>
    <div id="wrap">
       <h1>Drag tables into the database</h1>
       <br>
       
       <div id = "div2" ondrop="drop(event)" ondragover="allowDrop(event)">
       <img id="drag1" src="linux.png" draggable="true" ondragstart="drag(event)" width="128px" height="128px">&nbsp
       <img id="drag2" src="windows.png" draggable="true" ondragstart="drag(event)" width="128px" height="128px">&nbsp
       <img id="drag3" src="apple.png" draggable="true" ondragstart="drag(event)" width="128px" height="128px">&nbsp
       <img id="drag2" src="pc.png" draggable="true" ondragstart="drag(event)" width="128px" height="128px">&nbsp
       <img id="drag2" src="mac.png" draggable="true" ondragstart="drag(event)" width="128px" height="128px">&nbsp
       <img id="drag2" src="redhat.png" draggable="true" ondragstart="drag(event)" width="128px" height="128px">&nbsp
       <img id="drag2" src="ubuntu-icon.png" draggable="true" ondragstart="drag(event)" width="128px" height="128px">&nbsp
       </div>
       <br/>
    <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
    </div>
    </body>
    </html>

  2. #2
    Join Date
    Feb 2013
    Location
    San Diego, CA
    Posts
    3
    Nevermind! A friend of mine told me to use jQuery UI for this and it works perfectly now.

    Can view results at: http://psyllex.com/testing/dragndrop.html

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

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



Recent Articles