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可排序控件中的元素是draggable类型的单个对象。可以通过包含选项限制可移动的移动。我会使用这个不允许拖动除了orderPosition为draggedItem.OrderPosition + 1的项目之前的项目。当然，每次更改列表顺序时，您都必须重新计算并重置包含设置。这种方法的优点是对用户来说不那么令人沮丧，因为每次他以非法方式订购某些东西时，他的“工作”都不会被重置，可排序的东西根本不允许对这些东西进行不正确的排序。

希望这有任何意义，甚至有帮助。

使用jquery ui sortable将两个有序的项列表合并为第三个

3 个答案: