Anyone who are good with Drag and drop

Question

I'm sitting here trying to learn about drag and drop - (not that it is anything especially hard) but one thing is really on my nerves: i'm following this

http://www.w3schools.com/html/html5_draganddrop.asp

I don't understand why the elements (in this case the images) stacks when dragged on top of each other: is there any way that i can prevent this from happening ? so that nothing happens when someone tries to drag an drag-able element on top of another drag-able element - hope someone has time to help :)

Answer 1

I think it might help if i try to explain what i want to create

I would like to create this What i want to create

A list with different elements which can be draged back and forth to the drag area - depending on what the user wants: the elements should how ever not be able to be draged on each other as one of the elements then would disapere

Step two is then to write something that understands which elements the drag area holds and then use PHP to send me an email with the names of the elements chossen by the user - but that is something compleatly difference :D

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));
}
/*
if($("#div1").has(".drag-img").length)){

}
*/

	#element-box{
		border-radius: 10px;
		background-color: #333333;
		height: 50px;
		width:50px;
		display: inline-block;
		margin: 10px 20px;
	}

	#div1{
      width:400px;
      height:70px;
      padding:20px;
      border:1px solid #aaaaaa;
    }

    #drag1{
    background: red;
    }

    #drag2{
    background: blue;
    }

    #drag3{
    background: green;
    }

    #drag4{
    background: orange;
    }

    #drag5{
    background: hotpink;
    }

<div id="element-box" ondrop="drop(event)" ondragover="allowDrop(event)"><img class="drag-img" id="drag1" src="img/one.jpg" draggable="true"
ondragstart="drag(event)" width="100%" height="100%"/></div>
<div id="element-box" ondrop="drop(event)" ondragover="allowDrop(event)"><img class="drag-img" id="drag2" src="img/two.jpg" draggable="true"
ondragstart="drag(event)" width="100%" height="100%"/></div>
<div id="element-box" ondrop="drop(event)" ondragover="allowDrop(event)"><img class="drag-img" id="drag3" src="img/three.jpg" draggable="true"
ondragstart="drag(event)" width="100%" height="100%"/></div>
<div id="element-box" ondrop="drop(event)" ondragover="allowDrop(event)"><img class="drag-img" id="drag4" src="img/four.jpg" draggable="true"
ondragstart="drag(event)" width="100%" height="100%"/></div>
<div id="element-box" ondrop="drop(event)" ondragover="allowDrop(event)"><img class="drag-img" id="drag5" src="img/five.jpg" draggable="true"
ondragstart="drag(event)" width="100%" height="100%"/></div>

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>