JSFiddle - React, Tailwind, and code Playground

HTML

<div id="moveInHere">

    <div id="dragMe">Drag me...</div>

    <div id="butNotHere">...but not in here.</div>

</div>

CSS

#moveInHere {
    with: 500px;
    height: 500px;
    border: 1px solid black;
    background: #eee;
}
#dragMe{
    width: 50px;
    height: 50px;
    border: 1px solid black;
    background: #eee;
}
#butNotHere{
    float: right; 
    with: 50px;
    height: 50px;
    border: 1px solid black;
    background: #aaa;
}

JavaScript

var prevOffset, curOffset;
        $("#dragMe").draggable({
            drag: function(e,ui) {
                prevOffset= curOffset;
                curOffset= $.extend({},ui.offset);
                return true;
            }
        });

        $("#butNotHere").droppable({
            greedy: true,
            over: function(e,ui) {
                ui.helper.offset(curOffset= prevOffset).trigger("mouseup");
            },
            tolerance: "touch"
        });