JSFiddle - React, Tailwind, and code Playground

HTML

<img id="pic1" src="http://lorempixel.com/100/100/people/" alt="" draggable="true" />
<div id="left1"></div>

CSS

#left1 { border:1px dotted gray; width:200px; height:200px; }

JavaScript

function doFirst(){
    pic = document.getElementById('pic1');
    pic.addEventListener("dragstart", startDrag , false);
    left = document.getElementById('left1');
    left.addEventListener("dragenter", function(e){e.preventDefault();}, false);
    left.addEventListener("dragover", function(e){e.preventDefault();} , false);
    left.addEventListener("drop", dropped , false);
}

function startDrag(e){
    var code = '<img id="pic1" src="http://lorempixel.com/100/100/abstract/" />';
    e.dataTransfer.setData('hello', code);
}

function dropped(e) {
    e.preventDefault();
    left.innerHTML = e.dataTransfer.getData('hello');
}

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