JSFiddle - React, Tailwind, and code Playground

HTML

<div id="drop" style="width:200px;height:200px;border:1px solid #000">drop</div>
<div id="drag" style="width:200px;height:200px;border:1px solid #000">drag</div>


<div id="dragpos"></div>
<div id="droppos"></div>

JavaScript

$("#drag").draggable({
    stop: function(event, ui){
        var x = event.pageX - ui.offset.left;
        var y = event.pageY - ui.offset.top; 
        $("#dragpos").html('drag: ' + x + ', ' + y);
    }
});
$("#drop").droppable({
    drop: function(event, ui){
        var x = event.pageX - $(this).offset().left;
        var y = event.pageY - $(this).offset().top;  
        $("#droppos").html('drop: ' + x + ', ' + y);
    }
});