JSFiddle - React, Tailwind, and code Playground

by Tom DeBerardine

HTML

<div id="draggable" class="ui-widget-content">
    <p>Drag me to my target</p>
</div>
<div id="droppable" class="ui-widget-header">
    <p>Drop here</p>
</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;
}

JavaScript

$("#draggable").draggable();
$("#droppable").droppable({
    drop: function (event, ui) {
        $(this)
            .addClass("ui-state-highlight")
            .find("p")
            .html("Dropped!");
    }
});