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

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

1 个答案: