Javascript jQuery sortable获取正在交换的2个元素

我无法找到如何使用jQuery UI sortable获取目标元素

    $("#pages").sortable({
        opacity: 0.6,
        update: function(event, ui) {
            var first = ui.item; // First element to swap
            var second = ???? // Second element to swap
            swapOnServer(first, second);
        }
    });

我尝试过的所有选项都指向正在拖动的元素，但没有指向与之交换的元素：

ui.item[0]

，

event.srcElement

，

event.toElement

此外，

此

指向列表（OL）元素

说第二个我的意思是：

原订单为：

|0 |12 |3|

我们拖动元素1并将其放置在位置3。最终结果将是：

|0 |32 |1|

所以第一个元素是1，第二个元素是3（错误！见下文）

更新：我意识到我搞错了。本例中的新订单将被删除

|0 | 2 | 3 |1|

因此，我的问题没有真正意义。谢谢大家的帮助。我将标记投票并标记答案。

所以问题是如何获得第二个元素

---

当前的解决方法（因为在sortable中没有交换这一术语）如下所示。它使用带有命令的临时数组

    var prevPagesOrder = [];
    $("#pages").sortable({
        start: function(event, ui) {
            prevPagesOrder = $(this).sortable('toArray');
        },
        update: function(event, ui) {
            var currentOrder = $(this).sortable('toArray');
            var first = ui.item[0].id;
            var second = currentOrder[prevPagesOrder.indexOf(first)];
            swapOnServer(first, second);
        }
    });

谢谢，
Dmitry.

尝试使用函数，该函数按顺序提供项目列表的哈希值

如果您只需要在执行此操作之前删除新项目：

$("#pages").sortable({
    opacity: 0.6,
    update: function(event, ui) {
        var first = ui.item; // First element to swap
        var second = ui.item.prev();
        swapOnServer(first, second);
    }
});

如果second位于列表的开头，则它将为空。

实际上没有“second”项本身。你有一个项目，你只是把它放在另一个位置。它周围的项目相应地调整它们的位置。如果您想获得所有项的数组，可以使用该方法。

看看“可交换”jQuery插件：

它与“可排序”类似，但只影响选定组中的两个元素：被拖动的元素和被替换的被删除的元素。所有其他元素保持在当前位置。此插件基于现有的“可排序”jQuery插件构建，并继承所有可排序选项。

您可以使用

---

但这不是很好的插件

您可以使用

可拖动

和

可拖放

而不是

可排序

，以实现可交换效果。在实践中，这将如下所示：

(function() {
    var droppableParent;

    $('ul .element').draggable({
        revert: 'invalid',
        revertDuration: 200,
        start: function () {
            droppableParent = $(this).parent();

            $(this).addClass('being-dragged');
        },
        stop: function () {
            $(this).removeClass('being-dragged');
        }
    });

    $('ul li').droppable({
        hoverClass: 'drop-hover',
        drop: function (event, ui) {
            var draggable = $(ui.draggable[0]),
                draggableOffset = draggable.offset(),
                container = $(event.target),
                containerOffset = container.offset();

            $('.element', event.target).appendTo(droppableParent).css({opacity: 0}).animate({opacity: 1}, 200);

            draggable.appendTo(container).css({left: draggableOffset.left - containerOffset.left, top: draggableOffset.top - containerOffset.top}).animate({left: 0, top: 0}, 200);
        }
    });
} ());

---

演示，。

对于整个列表，我无能为力。我只需要2个已交换的项目，这样我就可以将更改发布到服务器。我不需要在服务器上发布整个列表，只交换2项。我认为Dmitry指的是jQuery UI可排序，您指的是接口元素的可排序。

UI.item.prev（）

是错误的。它将返回上一个元素。我需要获得正在交换的第二个元素。没有任何东西会说它将是以前的。没有什么东西被“交换”，你在列表中间掉了什么东西。您可以将整个列表以新形式发回，也可以将其之前和/或之后的项目发回新位置。您不能交换任何东西。@petersendidit，非常感谢您的帮助。我刚刚意识到我搞错了。实际上没有“交换”这样的东西，我必须使用整个列表。更新了问题以反映这一点，并对您的答案进行了投票。@Dimitry，没有“第二项”，因此您的问题非常不清楚。如果您允许用户在列表中的任何位置拾取和删除某个项目，那么这只是为了给它腾出空间而移动索引。只有当他向上或向下移动一个位置时，才会有两个项目受到影响。但是如果他把它从列表的顶部拿出来，然后在接下来的三个项目后面放下来，那么前三个项目的位置都会受到移动的影响。没有发生“切换”。请更详细地描述您需要完成的任务。

swapOnServer

方法是如何实现的？尝试了解决方案，似乎是这样一行：

var second=currentOrder[prevPagesOrder.indexOf（first）]应该是
var second=prevPagesOrder[currentOrder.indexOf（first）]这是最好的！我想向试图将代码从可排序更新为可交换的任何人指出，非常重要的是，您必须明确定义要拖动的项，并且光标位置在拖动元素的边界之外，例如：
$（'#我的列表'）。可交换（{items:'li'，cursorAt:{top:-10}）否则它将无法工作，但它吸你必须安装另一个插件