Edit in JSFiddle

var sourceElement = null;

function dragstart(e)
{
    e.dataTransfer.effectAllowed = "move";
    e.dataTransfer.setData("text/plain", this.src);
    sourceElement = this;
    console.log("Dragging Started");
}
document.getElementById("img1").addEventListener("dragstart", dragstart, false);
document.getElementById("img2").addEventListener("dragstart", dragstart, false);

function drag()
{
    console.log("Dragging");
}
document.getElementById("img1").addEventListener("drag", drag, false);
document.getElementById("img2").addEventListener("drag", drag, false);

function dragend(e)
{
    console.log("Dragging ended");
}
document.getElementById("img1").addEventListener("dragend", dragend, false);
document.getElementById("img2").addEventListener("dragend", dragend, false);

function dragenter()
{
    console.log("Dragged element enters droping zone");
}
document.getElementById("img1").addEventListener("dragenter", dragenter, false);
document.getElementById("img2").addEventListener("dragenter", dragenter, false);

function dragover(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");
}
document.getElementById("img1").addEventListener("dragover", dragover, false);
document.getElementById("img2").addEventListener("dragover", dragover, false);

function dragleave()
{
    console.log("Dragged element left target zone");
}
document.getElementById("img1").addEventListener("dragleave", dragleave, false);
document.getElementById("img2").addEventListener("dragleave", dragleave, false);

function drop(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.
    var url = this.src;
    this.src = e.dataTransfer.getData("text/plain");
    sourceElement.src = url;
    console.log("Dragged element dropped on target");
}
document.getElementById("img1").addEventListener("drop", drop, false);
document.getElementById("img2").addEventListener("drop", drop, 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;
}