jQuery可排序获取2个被交换的元素
我无法找到如何使用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 |
结果我的问题没有多大意义。 谢谢大家的帮助。 我会标记投票并标记答案。
所以问题是如何在这里获得第二个元素？
当前的解决方法（因为没有关于可排序交换的术语）如下。 它使用带有订单的临时数组。
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); } });
谢谢，
德米特里。
本身并没有真正的“第二”项目。 您有一个项目，而您只是将其放在另一个位置。 它周围的物品相应地调整它们的位置。 如果要获取所有项的数组，可以使用toArray方法。
尝试使用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); } });
如果它在列表的开头，则为null。
看看“Swapable”jQuery插件：
http://plugins.jquery.com/project/Swapable
它类似于“可排序”，但只影响所选组的两个元素：拖动元素和删除的元素。 所有其他元素都保持在当前位置。 此插件基于现有的“可排序”jQuery插件构建，并inheritance所有可排序选项。
您可以使用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/ 。
您可以使用http://plugins.jquery.com/project/Swapable
但这不是太好的插件