JSFiddle - React, Tailwind, and code Playground

HTML

<div id="dragMe">Drag Me</div>
<div class="container">
</div>
<div class="dropOnMe">Drop Here</div>

CSS

#dragMe {
    background-color: darkblue;
    color: white;
    height: 100px;
    width: 100px;
}
.dropOnMe {
    background-color: gray;
    height: 200px;
    width: 200px;
}
.container {
    height: 1200px;
    width: 100%;
    border: 1px solid gold;
}

JavaScript

/*
    Make your window small enough that you can't see "Drag Me" 
    and "Drop Here" at the same time, then attempt to drag the "Drag Me" box 
    onto the "Drop Here" box in one movement.  Note how "Drag Me" becomes 
    disconnected from the mouse cursor. 
*/
$(function() {
    $('#dragMe').draggable();
    $('.dropOnMe').droppable({
        drop: function(event, ui) {
            $(this).addClass("ui-state-highlight").text("Dropped!");
            ui.draggable.remove();
        }
    });
});