jQuery UI Sortable: How to disable a connectSortable, but still be able to drag an item away from it

Question

I have a situation whereby I have a series of connected sortable lists, and a list can have no more than 2 items at any one time.

Therefore I need to somehow disable the "full" list, but still allow an item to be dragged away from it.

// If this list has two items, disable it, otherwise enable it
if ($('li', this).size()==2) {
    $(this).addClass('ui-state-disabled');
} else {
    $(this).removeClass('ui-state-disabled');
}

I need to somehow disable the full ul as a drop target.

Any ideas would be hugely appreciated.

Answer 1

Something like this? I'm in a hurry, so not much time to explain. Here's a demo The code is using/expecting a variation of the HTML from the jQuery sortable demos

$(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();
});