JSFiddle - React, Tailwind, and code Playground

HTML

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
    <div id="drag1" draggable="true" ondragstart="drag(event)"></div>
</div>

CSS

#div1 {width:350px;height:170px;padding:10px;border:1px solid #aaaaaa;}
#drag1 {width:50px;height:50px;padding:10px;border:1px solid #000;background-color: #f00; position: absolute;}

JavaScript

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

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

function drop(ev) {
    ev.preventDefault();
    var data = ev.dataTransfer.getData("text/html");
    ev.target.appendChild(document.getElementById(data));
    //window.alert( ev.clientX + ',' + ev.clientY);
    document.getElementById("drag1").style.left = ev.clientX + 'px';
    document.getElementById("drag1").style.top = ev.clientY + 'px';
    return false;
}