JSFiddle - React, Tailwind, and code Playground

HTML

<div id="moveInHere">

    <div id="dragMe"> </div>
    <br/>
    <div id="butNotHere"> </div>

</div>

CSS

div { padding: 20px; margin: 20px; border: 1px solid red; }
#moveInHere { padding: 10px; }
#dragMe { width: 50px; }
#butNotHere { height: 50px; }

JavaScript

$(document).ready(function(){
    var shouldCancel = false;
    $('#dragMe').draggable({
        containment: '#moveInHere',
        revert: function(){
            if (shouldCancel) {
                shouldCancel = false;
                return true;
            } else {
                return false;
            }
        }
    });
    $('#butNotHere').droppable({
        over: function(){
            shouldCancel = true;
        },
        out: function(){
            shouldCancel = false;
        }
    });
});