使用jquery ui sortable將兩個有序的項目列表合並到第三個

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可排序似乎是一個很好的起點。 但是不支持保持原始順序（當然sortable的含義與我的要求相反。但是sortable支持的用戶界面與我的最終目標非常相似。）

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

提前致謝

Answer 1

你是對的。 jQuery的sortable可以解決問題。

從使用助手開始

$( ".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回調中返回false即可：

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

Answer 3

從概念上講-在不涉及實現細節的情況下，並且假設我們正在處理兩個對象數組-我將首先遍歷每個列表，並向每個對象添加一個從1開始的名為“ OrderPosition”的增量屬性，結果如下：

                item.OrderPosition   
list1item1      1
list1item2      2
list1item3      3

list2item1      4
list2item2      5

然后用一個簡單的jquery array.merge（）合並列表，它將把array2追加到array1上，或者如果您希望它們以交替的方式合並，則迭代並手動合並。 兩種方法都應保留單個列表的順序。 使用第二種方法時，應該會為您提供以下列表：

                OrderPosition
list1item1      1
list2item1      4
list1item2      2
list2item2      5
list1item3      3

這將使您保持有關在合並列表中某項目可能被排序的知識（某項目的排序不得低於其OrderPosition為draggedItem.OrderPosition + 1的項目）。

jQuery可排序控件中的元素是可拖動類型的單個對象。 可拖動對象的移動可能會受到遏制選項的限制。 我將使用它來不允許將除具有拖動位置的OrderPosition的項目之前的其他項拖動到draggedItem.OrderPosition + 1。 當然，每次更改列表順序時，您都必須重新計算並重置包含設置。 這種方法的優點是使用戶減少了挫敗感，因為用戶每次以非法方式訂購商品時都不會重置其“工作”，因此可分揀商品將根本不允許錯誤地分揀商品。

希望這有任何意義甚至幫助。