JSFiddle - React, Tailwind, and code Playground

HTML

<h1>Drag and Drop</h1>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br>
<div id="correctid" draggable="true" ondragstart="drag(event)">
    <img src="http://lorempixel.com/400/200/" id="wrongid">
</div>

CSS

#div1 {width:350px;height:70px;padding:10px;border:1px solid #aaaaaa;}

JavaScript

function allowDrop(ev) {
    ev.preventDefault();
}

function drag(ev) {
    ev.dataTransfer.setData("text", ev.currentTarget.id);
    alert(ev.currentTarget.id);
}

function drop(ev) {
    ev.preventDefault();
    var data = ev.dataTransfer.getData("text");
    ev.target.appendChild(document.getElementById(data));
}