JSFiddle - React, Tailwind, and code Playground

HTML

<div>Drag this image to the drop zone:</div>
<img src="http://www.google.com/logos/2012/Julia_Child-2012-hp.jpg" alt="" />

<div id="dropbox">
    DropZone => you could drop any image from any page here
</div>

CSS

#dropbox {
    border: solid 1px red;
    width: 200px;
    height: 200px;   
}

JavaScript

var dropbox = document.getElementById('dropbox');
    dropbox.addEventListener('dragenter', noopHandler, false);
    dropbox.addEventListener('dragexit', noopHandler, false);
    dropbox.addEventListener('dragover', noopHandler, false);
    dropbox.addEventListener('drop', drop, false);
    
    function noopHandler(evt) {
        evt.stopPropagation();
        evt.preventDefault();
    }
    function drop(evt) {
        evt.stopPropagation();
        evt.preventDefault(); 
        var imageUrl = evt.dataTransfer.getData('Text');
        alert(imageUrl);
    }