JSFiddle - React, Tailwind, and code Playground

HTML

<style>
#drop_container{border:1px solid #000; width:392px; height:220px; padding:5px; float:left; margin:20px;}
#dropback_container{border:1px solid #000; width:392px; height:220px; padding:5px;float:left; margin:20px;}
</style>
</head>
<body>

<div id="drop_container" ondrop="drop(event,'drop_container')" ondragover="DopHere(event)"></div>
<div id="dropback_container" ondrop="drop(event,'dropback_container')" ondragover="DopHere(event)"><img id="image_drag" src="http://www.google.com/logos/2012/Julia_Child-2012-hp.jpg" draggable="true"
ondragstart="image_drags(event)"></div>
<script>
function DopHere(ev) {
    ev.preventDefault();
}
function image_drags(ev) {
    ev.dataTransfer.setData("text", ev.target.id);
}
function drop(ev,div_id) {
       ev.preventDefault();
     
       var hasImages =hasImage(div_id);
       var data = ev.dataTransfer.getData("text");
       if(hasImages==false){       
         var data = ev.dataTransfer.getData("text");
         ev.target.appendChild(document.getElementById(data));
       }else{
alert('div already have an image.');
}
   }
function hasImage(id) {
       var arrival_div=document.getElementById(id);
       var childElements = document.getElementById(id).childNodes;
       for (var i = 0; i < childElements.length; i++) {
         if (childElements[i].localName != null && childElements[i].localName.toLowerCase() == "img") {
           return true;
         }
       }  
       return false;
     }
 
</script>
</body>
</html>