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

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

小提琴

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

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

Answer 1

你的代码中有一个拼写错误。我根据你的小提琴制作了一个新的小提琴。最新的jQuery UI版本和".sortable('instance'("中存在问题，因此我选择了版本1.11.4。

"over"选项

为您提供了两个列表的滚动功能，"停止"选项功能可重新排序第二个列表。从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/