Edit in JSFiddle

document.getElementById("img1").addEventListener("dragstart", function(e){
    
    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.    
    e.dataTransfer.dropEffect = "move";
    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.
    e.dataTransfer.dropEffect = "move";
    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;
}