限制可排序的项目数量（以可拖动作为源）？

Question

我有一个通过 connectToSortable 连接到多个可排序对象的可拖动对象。我想限制每个可排序项中可以放入的项目数量。当您从另一个可排序拖动时我可以执行此操作，但当您从可拖动到可排序时则不能执行此操作。一个简单的例子（如 JSBin）：

$( ".sortable" ).sortable({
  connectWith: ".sortable"
});

$( ".sortable" ).bind( "sortreceive", function(event, ui) {
  // This will not work because the sender is a draggable, which has no "cancel" method
  if ( 4 < $( this ).sortable( 'toArray' ).length ) {
    $(ui.sender).sortable('cancel');
  }
});

$( "#draggable li" ).draggable({
  connectToSortable: ".sortable",
  helper: 'clone'
});

我第一次尝试 $(ui.sender).sortable ('cancel'); 在 sortreceive 事件中，但因为发送者是一个 draggable，而不是另一个 sortable，所以它确实没有cancel 方法，这不起作用（所以 这些和这些问题似乎没有解决我的问题）。我尝试遵循 逻辑它将可拖动和可排序粘合在一起，但我看不出有什么地方可以跳进去并取消“伪造”的停止。

如果有某种视觉反馈，例如鼠标光标变为no-drop，和/或可排序的背景颜色变化，那就太好了。

上下文：这是尝试回答限制侧边栏中小部件的数量在 WordPress Stack Exchange 上。 WordPress 小部件管理页面有一个容器，其中所有可用小部件设置为可拖动，连接到每个侧边栏的不同可排序容器。我不想修改 核心代码，只需根据需要使用尽可能少的代码对其进行扩展，以防止在“完整”侧边栏上放置另一个小部件。

Answer 1

您可以在满足条件时停用连接：

$("#sortable").bind( "sortreceive", function(event, ui) {
    if ($( "#sortable li" ).length > 3){
        $( "#draggable li" ).draggable( "option", "connectToSortable", false );
    }
});

在此处拨弄： http://jsfiddle.net/ZLCDr/1/

Answer 2

只需添加 if 子句来检查可排序中的元素数量，并在达到该数量时取消绑定可拖动事件。

编辑：（现在包括多个列表支持）

$('.draggable').draggable({revert:true,helper:'clone',connectToSortable: '.sortable'});

$('.sortable').sortable({
    connectWith:'.sortable',
    receive: function(ui) {
        if($(this).children().length >=6) {
            $(this).children().addClass('filled');
            $(this).addClass('dontDrop');
            $('.sortable').sortable('option', 'connectWith',$('.sortable').not('.dontDrop'));
            $('.draggable').draggable('option', 'connectToSortable',$('.sortable').not('.dontDrop'));
        }else {
            $(this).children().removeClass('filled');
        }
        add_delete();
    }
});
function add_delete() {
    $('.delete').remove();
    $('.sortable>li').append('<span class="delete">--</span>');
    $('.delete').unbind('click').click(function(){
        if($(this).parent().siblings().length <=5) {//for atmost 6 children in sortable
            $(this).parent().parent().children().removeClass('filled');
            $(this).parent().parent().removeClass('dontDrop');
            console.log($('.sortable').not('.dontDrop'));
            $('.sortable').sortable('option', 'connectWith',$('.sortable').not('.dontDrop'));
            $('.draggable').draggable('option', 'connectToSortable',$('.sortable').not('.dontDrop'));
        }
        $(this).parent().hide('slow').remove();
    });
}
add_delete();

在此处检查小提琴JSFiddle

所以我在这里使用的是：不仅可以将选择器传递给 connectWith/connectToSortable 选项，还可以将元素本身传递给 connectWith/connectToSortable 选项。每当“ul”有 6 个元素时，我就给它指定“dontDrop”类，因此将其从连接中排除。
希望这能为您解决问题。

让赏金就这样来吧:D