JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.0/themes/base/jquery-ui.css">
<ul id="sortable1" class="connectedSortable">
    <li class="ui-state-default">Item 1</li>
    <li class="ui-state-default">Item 2</li>
</ul>

<ul id="sortable2" class="connectedSortable">
    <li class="ui-state-highlight">Item 1</li>
    <li class="ui-state-highlight">Item 2</li>
</ul>

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

CSS

.connectedSortable { list-style-type: none; margin: 0; padding: 0; float: left; margin-right: 10px; }
        .connectedSortable li { margin: 0 5px 5px 5px; padding: 5px; font-size: 1.2em; width: 120px; }
        ul { border:1px solid black; width:160px; height:80px; padding-left:10px }

JavaScript

$(function() {

    var fullSortables;
    var hoveringOverSortable;

    $(".connectedSortable").sortable({
        connectWith: '.connectedSortable',
        start: function(event, ui) {

            fullSortables =
            $(".connectedSortable")
            .not(this)
            .filter(
                function() {
                    return $(this).children("li").not(ui.helper).length >= 2;
                }
            )
            .addClass('ui-state-disabled');
        },
        over: function(event, ui) {
            hoveringOverSortable = this;
        },
        stop: function(event, ui) {
            var that = this;
            fullSortables.each(function() {
                if (this == hoveringOverSortable)
                    $(that).sortable('cancel');
            });
            hoveringOverSortable = null;
            $(".connectedSortable").removeClass('ui-state-disabled')
        }
    }).disableSelection();
});