JSFiddle - React, Tailwind, and code Playground

HTML

<meta charset="UTF-8" />     
<div class="demo">

<div id="drag_object" class="ui-widget-content">
    <p>Drag me to my target</p>
</div>

<div id="drag_over" class="ui-widget-header">
    <p>Over here</p>
</div>

</div><!-- End demo -->

CSS

#drag_object{ width: 100px; height: 100px; padding: 0.5em; float: left; margin: 10px 10px 10px 0; background-color: #ccc; }
#drag_over{ width: 150px; height: 150px; padding: 0.5em; float: left; margin: 10px; background-color: #eee;}

JavaScript

$(function() {
        $("#drag_object").draggable();
        $("#drag_over").droppable({
            over: function(event, ui) { alert('You dragged me over'); }
        });

    });