Question

我有一个可拖动的，通过connectToSortable连接到多个 sortables。我想限制每个可排序项目中可以放置的项目数量。当您从另一个可排序的拖动时，我可以执行此操作，但是当您从可拖动拖动到可排序时，我可以执行此操作。一个简单的例子（如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方法，这不起作用（所以these和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子句以检查sortable中的元素数量，并在达到该数字时取消绑定可拖动事件。

编辑:(现在包括多个列表支持）

$('.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

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

2 个答案: