JSFiddle - React, Tailwind, and code Playground

HTML

<section id="leftbox">
  i dare you to drop an image inme.
</section>
<section id="rightbox">
  <img id="facepic" src="http://jsfiddle.net/img/logo.png">
</section>

CSS

#leftbox{
   float:left;
   width:250px;
   height:250px;
   margin:5px;
   border:3px solid blue;
}

#rightbox{
   float:left;
   width:250px;
   height:250px;
   margin:5px;
   border:3px solid green;
}

JavaScript

function doFirst(){
    mypic = document.getElementById('facepic');
    mypic.addEventListener("dragstart",startDrag,false);    
        leftbox = document.getElementById('leftbox');
    //leftbox.addEventListener("dragenter",function(e){e.preventDefault;},false);
    leftbox.addEventListener("dragover",function(e){e.preventDefault;},false);
    //leftbox.addEventListener("dragover",dropped,false);
    leftbox.addEventListener("drop",dropped,false);
}

function startDrag(e){
    //var code = '<img src="images/download.jpg">';
    rightbox = document.getElementById('rightbox');
    var code = rightbox.innerHTML;
    e.dataTransfer.setData('Text', code);        
}

function dropped(e){
    e.preventDefault();
    leftbox.innerHTML = e.dataTransfer.getData('Text');
    //leftbox.innerHTML = '<img src="images/download.jpg">';
    
    
}



window.addEventListener("load",doFirst,false);