jQuery UI Sortable：如何禁用connectSortable，但仍然可以将项目拖离它

Question

我有一种情况，即我有一系列连接的可排序列表，一次列表不能超过2项。

因此我需要以某种方式禁用“完整”列表，但仍然允许将项目拖离它。

// 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');
}

我需要以某种方式禁用完整的ul作为放置目标。

任何想法都会受到高度赞赏。

Answer 1

这样的东西？我赶时间，所以没有多少时间来解释。 这是demo 代码正在使用/期待jQuery可排序演示中HTM​​L的变体

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