jQuery可排序的“更改"事件元素位置 [英] Jquery sortable 'change' event element position
本文介绍了jQuery可排序的“更改"事件元素位置的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
有没有办法将助手的当前位置拖到新位置上?
Is there way to get current position of helper being dragged on over new position ?
$("#sortable").sortable({
start: function (event, ui) {
var currPos1 = ui.item.index();
},
change: function (event, ui) {
var currPos2 = ui.item.index();
}
});
当实际更改发生时,似乎currPos1和currPos2具有相同的值!
It seems that currPos1 and currPos2 have same value when actual change happens !
我需要实现的是向用户突出显示开始拖动元素"到当前替换的元素"之间的所有位置.一旦用户释放鼠标按钮,更新就会发生,只有这样我才能获得新职位,但是在鼠标释放之前我需要它.
What I need to achieve is highlight to user all positions between 'start drag element' to 'currently replaced element'. Once user releases mouse button update happens and only then I get new position, but I need it before mouse release.
推荐答案
更新:26/08/2016 使用最新的jquery和jquery ui版本以及引导程序对其进行样式设置.
- demo: http://so.lucafilosofi.com/jquery-sortable-change-event-element-position/
$(function() {
$('#sortable').sortable({
start: function(event, ui) {
var start_pos = ui.item.index();
ui.item.data('start_pos', start_pos);
},
change: function(event, ui) {
var start_pos = ui.item.data('start_pos');
var index = ui.placeholder.index();
if (start_pos < index) {
$('#sortable li:nth-child(' + index + ')').addClass('highlights');
} else {
$('#sortable li:eq(' + (index + 1) + ')').addClass('highlights');
}
},
update: function(event, ui) {
$('#sortable li').removeClass('highlights');
}
});
});
这篇关于jQuery可排序的“更改"事件元素位置的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文