document.getElementById("img1").addEventListener("dragstart", function(){ console.log("Dragging Started"); }, false); document.getElementById("img2").addEventListener("dragstart", function(){ console.log("Dragging Started"); }, false); document.getElementById("img1").addEventListener("drag", function(){ console.log("Dragging"); }, false); document.getElementById("img2").addEventListener("drag", function(){ console.log("Dragging"); }, false); document.getElementById("img1").addEventListener("dragend", function(){ console.log("Dragging ended"); }, false); document.getElementById("img2").addEventListener("dragend", function(){ console.log("Dragging ended"); }, false); document.getElementById("img1").addEventListener("dragenter", function(){ console.log("Dragged element enters droping zone"); }, false); document.getElementById("img2").addEventListener("dragenter", function(){ console.log("Dragged element enters droping zone"); }, false); document.getElementById("img1").addEventListener("dragover", function(e){ e.preventDefault(); ////default browser action is not to make any element a dropable zone. We are preventing the default action for this element to make it a droppable zone. console.log("Dragged element enters droping zone"); }, false); document.getElementById("img2").addEventListener("dragover", function(e){ e.preventDefault(); ////default browser action is not to make any element a dropable zone. We are preventing the default action for this element to make it a droppable zone. console.log("Dragged element enters droping zone"); }, false); document.getElementById("img1").addEventListener("dragleave", function(){ console.log("Dragged element left target zone"); }, false); document.getElementById("img2").addEventListener("dragleave", function(){ console.log("Dragged element left target zone"); }, false); document.getElementById("img1").addEventListener("drop", function(e){ e.stopPropagation();////browsers usually redirect after drop event. I don't know why? Its beffer to stop it by stopping bubbling of the event to the browser window. console.log("Dragged element dropped on target"); }, false); document.getElementById("img2").addEventListener("drop", function(e){ e.stopPropagation();////browsers usually redirect after drop event. I don't know why? Its beffer to stop it by stopping bubbling of the event to the browser window. console.log("Dragged element dropped on target"); }, false);
<img src="http://qnimate.com/wp-content/uploads/2014/06/drag-and-drop-api.jpg" draggable="true" id="img1" /> <img src="http://qnimate.com/wp-content/uploads/2014/07/css3-columns.jpg" draggable="true" id="img2" />
img { height: 100px; width: 100px; }