Drag And Drop Demo

by tommylylck

HTML

<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");
    var nodeCopy = document.getElementById(data).cloneNode(true);
    nodeCopy.id = "newId"; /* We cannot use the same ID */
    ev.target.appendChild(nodeCopy);
}
</script>

<p>Drag the W3Schools image into the rectangle:</p>

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br>
<img id="drag1" src="https://www.google.com.hk/logos/doodles/2015/hedy-lamarrs-101st-birthday-5679746450980864.5-res.png" draggable="true" ondragstart="drag(event)">

CSS

#div1 {width:91;height:41;padding:0px;border:1px solid #aaaaaa;}