JSFiddle - React, Tailwind, and code Playground

HTML

<ul class='sort'>
    <li></li>
    <li></li>
</ul>
<ul class='sort'>
    <li></li>
    <li></li>
</ul>
<ul class='sort'>
    <li></li>
    <li></li>
</ul>
<ul class='sort'>
    <li></li>
    <li></li>
</ul>

CSS

.sort { display:inline-block; margin:5px; border:1px solid grey; vertical-align:top; }

ul { min-width:60px; min-height:20px; }
li { width:50px; height:15px; margin:5px; border:1px solid silver; }

JavaScript

$('.sort').sortable({
    revert: 'invalid',
    connectWith: '.sort',
    stop: function(){
        // Enable all sortables
        $('.sort').each(function(){
            var $this = $(this);
            
            $this.css('borderColor','gray');
            $this.sortable('enable');
        });
    }
});

$('.sort li').mousedown(function(){
    // Check number of elements already in each sortable
    $('.sort').not($(this).parent()).each(function(){
        var $this = $(this);
        
        if($this.find('li').length >= 3){
            $this.css('borderColor','red');
            $this.sortable('disable');
        } else {
            $this.css('borderColor','gray');
            $this.sortable('enable');
        }
    });
})