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);
<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; }