JSFiddle - React, Tailwind, and code Playground

HTML

<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" />

<div id="cats">
  
</div>

CSS

img
{
    height: 100px;
    width: 100px;
}

#cats {
  background-color: blue;
  width:100%;
  height: 100px;
}

JavaScript

var sourceElement = null;

function dragstart(e)
{
    e.dataTransfer.effectAllowed = "move";
    e.dataTransfer.setData("text/plain", this.src);
    e.dataTransfer.setData("id", e.target.id);
    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);
document.getElementById("cats").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...