JSFiddle - React, Tailwind, and code Playground

by stevenkaspar

HTML

<script>
function allowDrop(ev) {
    ev.preventDefault();
}

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

function drop(ev) {
    ev.preventDefault();
    var data = ev.dataTransfer.getData("text");
    ev.target.appendChild(document.getElementById(data));
}
</script>
<style>#div1{ height: 70px; width: 100%; border: 3px solid blue;} #div2{ height: 70px; width: 100%; border: 3px solid green;} #div3{ height: 70px; width: 100%; border: 3px solid yellow;}</style>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)">
  
  
<img id="drag1" src="//www.gravatar.com/avatar/d37a8a422164b71288f72377c7eb6d5e/?default=&s=64" draggable="true"
ondragstart="drag(event)" width="336" height="69">

</div>


<div id="div3" ondrop="drop(event)" ondragover="allowDrop(event)"></div>