Drag an drop

The idea of the snippet section is to get you off and running with something that works. For full example of how to write in html see www.w3schools.com

Reload page to do again.

Setup:
image with id "drag1" and add draggable="true" ondragstart="drag(event)"

a div with the id of "div1" and add ondrop="drop(event)" ondragover="allowDrop(event)"
Example HTML
<img id="drag1" src="drag.png" draggable="true" ondragstart="drag(event)">
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">drop</div>
The following js
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));
}
Extra pretty: Add a style for your div that is usually a box. Once you get it working, play around with Jquery or whatever your using, and names.
#div1 {
width: 350px;
height: 70px;
padding: 10px;
border: 1px solid #aaaaaa;
}