JSFiddle - React, Tailwind, and code Playground

by SeasonEnds

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css">
<div class="demo">
    
    ID of target: <span class="display"></span>
    <br>

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

<br class="clear">
    
    <div id="droppable1" class="droppable ui-widget-header">
        <p>Drop here</p>
    </div>
    
    <div id="droppable2" class="droppable ui-widget-header">
        <p>Drop here</p>
    </div>
    
</div>

CSS

#draggable { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 10px 10px 10px 0; }
.droppable { width: 150px; height: 150px; padding: 0.5em; float: left; margin: 10px; }
.clear {clear: both;}

JavaScript

$(function() {
    $("#draggable").draggable();
    $(".droppable").droppable({
        drop: function(event, ui) {
            $(this).addClass("ui-state-highlight")
                .find("p").html("Dropped in " + this.id);
        },
        over: function(event, ui) {
            $('.display').html( this.id );
        }
    });
});