JSFiddle - React, Tailwind, and code Playground

by Anderson Barreto Furlan

HTML

<script src="//code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css">
<ul id="sortable1" class="connectedSortable">
  <li class="ui-state-highlight">Item</li>
  <li class="ui-state-highlight">Item</li>
  <li class="ui-state-highlight">Item</li>
  <li class="ui-state-highlight">Item</li>
</ul>
 
<ul id="sortable2" class="connectedSortable">
  <li class="ui-state-highlight">Item</li>
  <li class="ui-state-highlight">Item</li>
  <li class="ui-state-highlight">Item</li>
</ul>

<ul id="sortable3" class="connectedSortable">
  <li class="ui-state-highlight">Item</li>
  <li class="ui-state-highlight">Item</li>
  <li class="ui-state-highlight">Item</li>
</ul>

CSS

#sortable1, #sortable2, #sortable3 {
    border: 1px solid #eee;
    width: 142px;
    min-height: 20px;
    list-style-type: none;
    margin: 0;
    padding: 5px 0 0 0;
    float: left;
    margin-right: 10px;
  }
  #sortable1 li, #sortable2 li, #sortable3 li {
    margin: 0 5px 5px 5px;
    padding: 5px;
    font-size: 1.2em;
    width: 120px;
  }

JavaScript

$(function() {
    $( "#sortable1, #sortable2, #sortable3" ).sortable({
      cursor:'move',
      connectWith: ".connectedSortable",
        //função ao criar os sortables
        create : function(){
            //desabilita se houve 4 ou  mais itens
            if($(this).children('li:not(.ui-sortable-placeholder)').length >= 4){
                $(this).sortable("disable");
                $(this).children('li').addClass('ui-state-disabled');
            }
        },
        //função ao fazer o update
        update : function(){
            /*
            * seu código aqui para update na base de dados
            */
            
             //desabilita se houve 4 ou  mais itens
             if($(this).children('li:not(.ui-sortable-placeholder)').length >= 4){
                $(this).sortable("disable");
                $(this).children('li').addClass('ui-state-disabled');
            }
        },
    }).disableSelection();
    
  });