Page is 'ordering' my drag and drop, how to make it random
I have two droppable areas on my page and multiple icons that I want to
drag back and forth between the two areas. The problem is when I try to
drag them over out of order...the page puts them back in a order for me.
Example if I have 1, 2, 3 (icons) if I try and drag 3 first..when I drop
it, it puts 1 there instead of three. I've tried to read up on the finer
points of the drag and drop procedure but I can't seem to find anything
about it. Thanks for the help and here's my code:
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
#div1 {width:600px;height:250px;padding:10px;border:1px solid #aaaaaa;}
#div2 {width:600px;padding:10px;border:1px solid #aaaaaa;}
.button {
border-top: 1px solid #96d1f8;
background: #65a9d7;
background: -webkit-gradient(linear, left top, left bottom,
from(#3e779d), to(#65a9d7));
background: -webkit-linear-gradient(top, #3e779d, #65a9d7);
background: -moz-linear-gradient(top, #3e779d, #65a9d7);
background: -ms-linear-gradient(top, #3e779d, #65a9d7);
background: -o-linear-gradient(top, #3e779d, #65a9d7);
padding: 9px 18px;
-webkit-border-radius: 9px;
-moz-border-radius: 9px;
border-radius: 9px;
-webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
-moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
box-shadow: rgba(0,0,0,1) 0 1px 0;
text-shadow: rgba(0,0,0,.4) 0 1px 0;
color: white;
font-size: 20px;
font-family: Helvetica, Arial, Sans-Serif;
text-decoration: none;
vertical-align: middle;
}
.button:hover {
border-top-color: #28597a;
background: #28597a;
color: #ccc;
}
.button:active {
border-top-color: #1b435e;
background: #1b435e;
}
</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>
<p>Drag into the rectangle</p>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<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"> 
<img id="drag2" src="windows.png" draggable="true"
ondragstart="drag(event)" width="128px" height="128px"> 
<img id="drag3" src="apple.png" draggable="true" ondragstart="drag(event)"
width="128px" height="128px"> 
<img id="drag2" src="pc.png" draggable="true" ondragstart="drag(event)"
width="128px" height="128px"> 
<img id="drag2" src="mac.png" draggable="true" ondragstart="drag(event)"
width="128px" height="128px"> 
<img id="drag2" src="redhat.png" draggable="true"
ondragstart="drag(event)" width="128px" height="128px"> 
<img id="drag2" src="ubuntu-icon.png" draggable="true"
ondragstart="drag(event)" width="128px" height="128px"> 
<img id="drag2" src="fedora.png" draggable="true"
ondragstart="drag(event)" width="128px" height="128px"> 
</div>
</body>
</html>
No comments:
Post a Comment