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>