我无法找到如何使用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 |
结果我的问题真的没有意义。谢谢大家的帮助。我会标记投票并标记答案。
所以问题是如何在这里获得第二个元素?
当前的解决方法(因为在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);
}
});
谢谢,
德米特里。
答案 0 :(得分:7)
您可以使用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);
}
});
} ());
答案 1 :(得分:6)
尝试使用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。
答案 2 :(得分:6)
看看“Swapable”jQuery插件:
http://plugins.jquery.com/project/Swapable
它类似于“可排序”,但只影响所选组的两个元素:拖动元素和删除一个被交换的元素。所有其他元素都保持在当前位置。此插件基于现有的“可排序”jQuery插件构建,并继承了所有可排序选项。
答案 3 :(得分:5)
本身并没有真正的“第二”项目。您有一个项目,而您只是将其放在另一个位置。它周围的物品相应地调整它们的位置。如果您想获得所有项目的数组,可以使用toArray方法。
答案 4 :(得分:0)
您可以使用http://plugins.jquery.com/project/Swapable
但这不是太好的插件