在排序更改事件期间更新排序顺序-jQuery UI [英] Updating sort order during sort change event - jQuery UI
问题描述
我希望list元素的值成为排序事件期间排序位置的索引.
I want the value of the list element to be the index of the sorted position during sort event.
此值应在排序更改事件期间自动更新.
This value should update automatically during sort change event.
<script type="text/javascript">
$(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 + ')').html(index-2);
} else {
$('#sortable li:eq(' + (index + 1) + ')').html(index + 1);
}
},
update : function(event, ui) {
var index = ui.item.index();
$('#sortable li:nth-child(' + (index + 1) + ')').html(index);
},
axis : 'y'
});
});
</script>
我制造了一个小提琴 http://jsfiddle.net/jagan2explore/4mcpq/
I created a fiddle http://jsfiddle.net/jagan2explore/4mcpq/
解释我的要求.
如果我将第1个元素移到第5个位置,则所有其他元素的值都会正确更新, 如果我将第5位移至第1位,则值会相应更新.
If i move 1'st element to 5th position all other elements values are updated rightly, If i move 5th to 1'st the value updates accordingly.
假设我将列表元素从1移到5&从5到2而没有离开(在single sort event期间),则不会相应更新值.
Suppose if i move a list element from 1 to 5 & from 5 to 2 without leaving (during single sort event ), the values are not updated accordingly.
我错过了什么吗?
任何帮助将不胜感激.预先感谢
Any help would be greatly appreciated. Thanks in advance
推荐答案
尝试一下:
update : function(event, ui) {
var index = ui.item.index();
var start_pos = ui.item.data('start_pos');
//update the html of the moved item to the current index
$('#sortable li:nth-child(' + (index + 1) + ')').html(index);
if (start_pos < index) {
//update the items before the re-ordered item
for(var i=index; i > 0; i--){
$('#sortable li:nth-child(' + i + ')').html(i - 1);
}
}else {
//update the items after the re-ordered item
for(var i=index+2;i <= $("#sortable li").length; i++){
$('#sortable li:nth-child(' + i + ')').html(i-1);
}
}
},
演示: jsfiddle
这篇关于在排序更改事件期间更新排序顺序-jQuery UI的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!