JSFiddle - React, Tailwind, and code Playground

HTML

<div id="under" class="drop">
    under
</div>

<div id="over" class="drop">
    over
</div>

<div id="drag" class="drag">
    drag
</div>

CSS

#under {position: absolute; left: 50px; top: 50px; width: 100px; height: 100px; background-color: yellow; z-index: 1;}

#over {position: absolute; left: 75px; top: 75px; width: 100px; height: 100px; background-color: green; z-index: 2;}

#drag {z-index: 3;}

JavaScript

$(".drag").draggable
(
    {
        revert: true
    }
);
    
$(".drop").droppable
(
    {
        tolerance: "pointer",
        drop: function(event, ui)
        {
            alert(this.id);
        }
    }
);