JSFiddle - React, Tailwind, and code Playground

HTML

<div id="mover" draggable="true" ondragstart="dragboxstart(event)" ondragend="dragboxend(event)">Drag Me</div>

<script>
var startpos;

function dragboxstart(ev) {
    startpos = [ev.screenX, ev.screenY];
    ev.dataTransfer.setData("text/plain", ev.target.id);
}

function dragboxend(ev) {
    var el = document.querySelector("#mover");
    var style = window.getComputedStyle(el, null);    
    var endpos = [ev.screenX, ev.screenY];
           
    el.style.top = Number(style.top.replace("px", '')) + (endpos[1] - startpos[1]) + "px";
    el.style.left = Number(style.left.replace("px", '')) + (endpos[0] - startpos[0]) + "px"; 
}
</script>

CSS

#mover {
   position: absolute;
    width: 150px;
    height: 150px;
    background-color: #bada55;
    padding: 10px;
    cursor: move;
}