JSFiddle - React, Tailwind, and code Playground

by Ramy Nasr

HTML

<script src="//code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
<div id="draggable_2" class="ui-widget-content draggable-item">
    <p>draggable_2</p>
</div>
<div id="draggable" class="ui-widget-content draggable-item">
    <p>draggable</p>
</div>
<div class="ui-widget-header droppable-item" data-accept="#draggable">
    <p></p>
</div>
<div class="ui-widget-header droppable-item" data-accept="#draggable_2">
    <p></p>
</div>
<div class="ui-widget-header droppable-item" data-accept="#draggable_3">
    <p></p>
</div>
<div class="ui-widget-header droppable-item" data-accept="#draggable_4">
    <p></p>
</div>
<div class="ui-widget-header droppable-item" data-accept="#draggable_5">
    <p></p>
</div>
<div class="ui-widget-header droppable-item" data-accept="#draggable_6">
    <p></p>
</div>
<div class="ui-widget-header droppable-item" data-accept="#draggable_7">
    <p></p>
</div>
<div class="ui-widget-header droppable-item" data-accept="#draggable_8">
    <p></p>
</div>

CSS

.droppable-item {
    width: 150px;
    height: 150px;
    padding: 0.5em;
    float: left;
    margin: 10px;
    border: 1px solid red;
}
.draggable-item {
    width: 100px;
    height: 100px;
    padding: 0.5em;
    float: left;
    margin: 10px 10px 10px 0;
    border: 1px solid blue;
}

JavaScript

$(function () {
    $(".draggable-item").draggable();

    $('.droppable-item').each(function (i, ele) {
        // Gets the accepted from the HTML property "data-accept"
        var accept = $(this).data('accept');

        // This is just to show what the item accepts. you can remove it.
        $(this).find('p').text('accepts: ' + accept);

        // Init the jQuery UI droppable()
        $(this).droppable({
            accept: accept,
            drop: function (event, ui) {
                $(this)
                    .removeClass("ui-widget-header")
                    .addClass("ui-state-highlight")
                    .find("p")
                    .html("Dropped!");
            },
            out: function (event, ui) {
                $(this).removeClass("ui-state-highlight").addClass("ui-widget-header")
                    .find("p")
                .html("accept: " + accept);
            }
        });
    });
});