JSFiddle - React, Tailwind, and code Playground

by SebastianPataneMasuelli

HTML

<div id="selected">
    <ul class="sortable-list">
    </ul>
</div>


<div id="container">
    <ul class="sortable-list ui-widget-content"">
             <li>1</li>
             <li>2</li>
              <li>...</li>
             <li>29</li>
             <li>30</li>
    </ul>
</div>

CSS

#selected ul{
 height: 100px;
 background-color: orange; 
}


#container li {
 border: 1px solid red;   
}

JavaScript

$(document).ready(function(){

    var total = 0;
    $( "#container ul li" ).draggable();
    $("#selected ul").droppable({
        drop: function() {alert('dropped'); }
        
        /*drop: function() {
                total = $("#selected li").length;
                //alert(total);
                if (total >= 10) {
                    $("#container li").draggable({ revert: true });
                } else {
                    //$("#container li").draggable({ revert: false });
                }
            }*/
    });
});