如何在拖動時動態排除可排序項目？

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/