如何在拖动时动态排除可排序项目？

Question

我有两个列表：

<ul class='list_one'>
<li>drag me</li>
<li>drag me</li>
</ul>

<ul class='list_two'>
<li class='first'>top most</li>
<li class='middle'>here i am</li>
<li class='middle'>here i am</li>
<li class='last'>least most</li>
</ul>

我想防止第二个列表中的第一个和最后一个项目被排序或移动。他们将永久留在这些职位上。

问题是当一个占位符阴影被投射时，最后一个项目被推下，离开固定的位置。

jQuery('ul.sq-ranksort-buckets').sortable({
  connectsWith: 'ul.sq-ranksort-cards',
  items: "li:not(.last_dropped, .suppress_move)",
  cancel: ".ui-sortable-disabled, .suppress_move, .do_not_drop, ul.do_not_drop",
  over: function( event, ui ) {
    if(jQuery('.suppress_move.last:visible').length === 0) {
        jQuery(this).addClass('do_not_drop');
        jQuery(ui.item).addClass('last_dropped');
        console.log('should cancel happen: ' + jQuery('.do_not_drop').length);
    } else {
        jQuery(this).removeClass('do_not_drop');
        jQuery(ui.item).removeClass('last_dropped');
        console.log('should cancel happen: ' + jQuery('.do_not_drop').length);
    }
  }
});

Fiddle

我想知道是否有办法动态重铸通常在排序中取消的内容，由一个类指定，然后有一个事件触发器，就好像您将排序放在不可排序的区域中一样？

这是我必须采用的方法，因为我无法控制原始的可排序调用和选项，也不能简单地用有限的功能重新转换它。

Answer 1

您的代码中有错字。我根据你的制作了一个新的小提琴。 最新的jQuery UI版本和“.sortable('instance')”有问题，所以我选择1.11.4版本。

“over”选项为您提供列表的滚动功能，“stop”选项功能可重新排序第二个列表。从 list_two 中删除所有项目（第一个和最后一个项目除外）时，这是必要的。 希望这就是您要搜索的内容。

这是新代码：

$(function() {
    $( ".connectedSortable" ).sortable({
        connectWith: '.connectedSortable',
        items: "li:not(.first, .last)",
        placeholder: "ui-state-highlight",
        over: function(e, ui){
            $(ui.sender).sortable('instance').scrollParent = $(e.target)
        },
        stop: function (e, ui) {
            if ( $('.list_two li').length < 4 ) {
                $('.list_two li:eq(2):not(.first, .last)').after($('.list_two li:eq(1)'));
            }
        }
    }).disableSelection();
});

见小提琴：https://jsfiddle.net/9tLzwpra/7/