使用jQuery UI排序的合併中的兩個有序列表到第三

Question

有兩個列表[A,B,C,D]和[1,2,3,4]，我要爲將它們合併成一個新的列表提供用戶界面。在新列表中，應保留每個列表的原始順序。例如，[A,1,B,2,C,3,D,4]或[A,B,C,D,1,2,3,4]或[A,B,1,C,2,3,4,D]中的任何一個都可以。但[B,A,1,2,3,4,C,D]未被接受，因爲B在A之前。

jQuery UI排序似乎是一個很好的起點。但不支持保持原始順序（當然，可排序的含義與我的要求相反，但用戶界面支持排序，與我的最終目標非常相似。）

我認爲處理接收事件和取消訂單不被維護時的排序可能是解決方案。但是在接收完成時找不到如何取消或撤消拖動。

在此先感謝

Answer 1

你是對的。 jquery的排序會做的伎倆。

開始使用一個輔助

$(".selector").sortable({ helper: 'clone' }); 

這不會拖累該項目本身，而是一個克隆的複製品。

接下來，您可以使用事件「beforeStop」來檢查上一個和下一個項目。

$(".selector").sortable({ 
    helper: 'clone', 
    beforeStop: function(event, ui) { ... } 
}); 

記住appendTo和prependTo和insertAfter和的insertBefore功能是移動一個DOM元素而不是克隆它。這意味着此代碼對於使用li元素播放有效。

HTML：

<ul> 
<li class='i-1'>first</li> 
<li class='i-2'>second</li> 
<li class='i-3'>third</li> 
<li class='i-4'>fourth</li> 
</ul> 

的jQuery：

$('li').eq(3).insertBefore('li.i-1'); 

結果：

<ul> 
<li class='i-4'>fourth</li> 
<li class='i-1'>first</li> 
<li class='i-2'>second</li> 
<li class='i-3'>third</li> 
</ul> 

Answer 2

要取消分揀剛剛返回sortbeforestop回調錯誤：

$("#sortable").bind("sortbeforestop", function(event, ui) { 
    return false; 
}); 

Answer 3

概念 - 沒有進入實施細則，並假設我們正在處理的對象的兩個數組 - 我會先通過每個列表和添加一個名爲「OrderPosition」遞增屬性從1開始，導致以下每個對象：

   item.OrderPosition 
list1item1  1 
list1item2  2 
list1item3  3 

list2item1  4 
list2item2  5 

然後用簡單的jQuery array.merge（），它會追加數組2到陣列1或者，如果你希望他們以交替的方式迭代合併和手動合併合併列表。兩種方法都應該保留單獨的列表訂單。

   OrderPosition 
list1item1  1 
list2item1  4 
list1item2  2 
list2item2  5 
list1item3  3 

這將讓你保持有關如何低，項目可以合併列表中的排序（一個項目可能不被責令比任何低知識：這應該使用第二種方法時給你下面的列表具有draggedItem的OrderPosition的項目。OrderPosition + 1）

jQuery可排序控件中的元素是單個可拖動類型的對象。可拖拽可能會受到遏制選項的限制。我會用這個拖拽任何比itemPosition of draggedItem.OrderPosition + 1項目之前的項目更遠的項目。當然，每次更改列表順序時，您都必須重新計算和重置包含的設置。這種方法的優點是對用戶的挫敗感較小，因爲他的「工作」在每次他以非法的方式訂購某些東西時都不會被重置，這種排序將不允許錯誤地排序某些東西。

希望這有什麼意義，甚至有所幫助。