JSFiddle - React, Tailwind, and code Playground

by TCHdevlp

HTML

<div id="draggables">
    <ul id="items">
        <li id="item-1" class="item">this is draggable</li>
        <li id="item-2" class="item">I can be drag</li>
        <li id="item-3" class="item">Plz, drag me</li>
        <li id="item-4" class="item">foo bar</li>
    </ul>
</div>

<div id="droppables">
</div>

CSS

.item{ 
    border:1px solid black;
    background-color:silver;
    list-style:none;
    width:100px;
}
#droppables{ 
    width:200px;
    height:200px;
    border:solid 1px red;
}
.dropped{
    background-color:#AAA;
}

JavaScript

$(".item").draggable();


$("#droppables").droppable({
        addClasses: false,
        greedy: true,
        accept: function(ele){
            return !($(this).hasClass("dropped"));
        },
        drop: function(event, ui) {
                 $(this).addClass("dropped");
                }
});