jquery - 限制可排序的项目数量(以可拖 Action 为源)？

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 方法，并且这不起作用(所以 these 和 these 问题似乎无法解决我的问题)。我尝试过关注 the logic that glues the draggable and the sortable together ，但我看不出有什么地方可以跳进去并取消“伪造”的停靠点。

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

上下文:这是试图回答 Limit number of Widgets in Sidebars在 WordPress Stack Exchange 上。 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/