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

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

我首先在sortreceive 事件中尝试了$(ui.sender).sortable('cancel');，但是因为发件人是draggable，而不是另一个sortable，所以它没有cancel 方法并且这不起作用（所以@987654322 @ 和 these 问题似乎不能解决我的问题）。我曾尝试关注the logic that glues the draggable and the sortable together，但我看不到任何地方可以跳入并取消“假”停止。

如果有某种视觉反馈会很棒，比如鼠标光标变为no-drop，和/或可排序的背景颜色发生变化。

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

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 选项。每当一个“ul”有 6 个元素时，我给它一个类“dontDrop”，因此它被排除在连接之外。 希望这可以为您解决问题。

让赏金这样来：D