jQuery sortable 获得 2 个被交换的元素答案

【问题标题】：jQuery sortable obtain 2 elements being swappedjQuery sortable 获得 2 个被交换的元素
【发布时间】：2011-01-16 20:20:12
【问题描述】：

我不知道如何使用可排序的 jQuery UI 获取目标元素。

    $("#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。

此外，this 指向 LIST (OL) 元素。

说第二我的意思是跟随：

原来的顺序是：

| 0 | 1 | 2 | 3 |

我们将元素 1 拖放到位置 3。最终会得到：

| 0 | 3 | 2 | 1 |

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

更新：我意识到我弄错了。这种情况下的新顺序将是。

| 0 | 2 | 3 | 1 |

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

那么问题是这里如何获取第二个元素呢？

当前的解决方法（因为在可排序中没有作为 swapping 的术语）如下。它使用带有订单的临时数组。

    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);
        }
    });

谢谢，
德米特里。

【问题讨论】：

@Dimitriy，没有“第二项”，因此您的问题非常不清楚。如果您允许用户在列表中的任何位置拾取和放置项目，它只是移动索引为其腾出空间。只有当他将它向上或向下移动一个位置时，才会影响两个项目。但是如果他从列表的顶部取出它，并在接下来的三个项目之后将其丢弃，那么前三个项目的位置都会受到移动的影响。没有发生“切换”。请更详细地描述您需要完成的工作。
swapOnServer 方法怎么样？
尝试了解决方案，似乎这一行：var second = currentOrder[prevPagesOrder.indexOf(first)]; 应该是var second =prevPagesOrder[currentOrder.indexOf(first)];

标签： javascript jquery jquery-ui jquery-ui-sortable

【解决方案1】：

尝试使用serialize 函数，它会按顺序为您提供项目列表的哈希值。

如果您只需要新物品掉落的物品，然后您可以执行此操作：

$("#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);
    }
});

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

【讨论】：

整个列表我无能为力。我只需要 2 个已交换的项目，因此我可以将更改发布到服务器。我不需要将整个列表发布到服务器，只交换 2 个项目。
我认为 Dmitriy 指的是 jQuery UI Sortable，你指的是 Interface 元素的 sortable。
ui.item.prev() 是错误。它将返回前一个元素。我需要获取要交换的第二个元素。没有任何迹象表明它将是前一个。
没有被“交换”这样的东西，你正在把一些东西放在列表的中间。您可以以新形式发回整个列表，也可以将其之前和/或之后的项目发回新位置。你没有交换任何东西。
@petersendidit，非常感谢您的帮助。我刚刚意识到我弄错了。真的没有“交换”这样的东西，我必须使用整个列表。更新了问题以反映这一点并为您的答案投票。

【解决方案2】：

本身并没有真正的“第二”项。你有一个项目，你只是把它放在另一个位置。它周围的物品会相应地调整它们的位置。如果要获取所有项目的数组，可以使用toArray 方法。

【讨论】：

【解决方案3】：

看看“Swapable”的 jQuery 插件：

http://plugins.jquery.com/project/Swapable

它类似于“Sortable”，但只影响所选组的两个元素：拖放的元素和交换的元素。所有其他元素都保持在当前位置。该插件基于现有的“可排序”jQuery 插件构建，并继承了所有可排序选项。

【讨论】：

这是最好的！我想提醒任何试图将他们的代码从可排序更新为可交换的人，非常重要的是，你们都定义了要明确拖动的项目，并且光标位置超出了拖动元素的范围，如下所示： $('#my-list').swappable({items: 'li', cursorAt: {top:-10}}); 否则将无法正常工作
但是你必须安装另一个插件很糟糕

【解决方案4】：

您可以使用http://plugins.jquery.com/project/Swapable

但这不是太好的插件

【讨论】：

【解决方案5】：

您可以使用draggable和droppable代替sortable来实现可交换效果。实际上，这将如下所示：

(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);
        }
    });
} ());

演示，http://jsfiddle.net/FZ42C/1/.

【讨论】：