JSFiddle - React, Tailwind, and code Playground

by ericjohannsen

HTML

<div id="container">
    <div id="menu">
        <div class="item">
            This is an item that can be dragged over to the right-hand drop target
        </div>
        <div class="item">
            This is an item that can be dragged over to the right-hand drop target
        </div>
        <div class="item">
            This is an item that can be dragged over to the right-hand drop target
        </div>
        <div class="item">
            This is an item that can be dragged over to the right-hand drop target
        </div>
    </div>
    
    <div id="target">
        <p>Drop Here</p>
    </div>
</div>

CSS

#menu {
    width:100px;
    display:inline-block;
    vertical-align:top;
}
.item {
    border:1px dotted black;
}
#target {
    width:150px;
    height:120px;
    display:inline-block;
    vertical-align:top;
    background-color: lightblue;
}

JavaScript

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