jQuery UI可sorting,如何确定更新事件中的当前位置和新位置?
我有:
<ul id="sortableList"> <li>item 1</li> <li>item 2</li> <li>item 3</li> </ul>
我已经连线到update: function(event, ui) { }
但不知道如何获取元素的原始位置和新位置。 如果我将项目3移动到项目1上方,我想将原始位置设置为2 (基于0的索引),并将项目3的新位置设置为0 。
$('#sortable').sortable({ start: function(e, ui) { // creates a temporary attribute on the element with the old index $(this).attr('data-previndex', ui.item.index()); }, update: function(e, ui) { // gets the new and old index then removes the temporary attribute var newIndex = ui.item.index(); var oldIndex = $(this).attr('data-previndex'); $(this).removeAttr('data-previndex'); } });
当调用更新函数时,ui.item.sortable尚未更新,但UI元素在视觉上已移动。
这允许你在更新函数中获得旧的位置和新的位置。
$('#sortable').sortable({ update: function(e, ui) { // ui.item.sortable is the model but it is not updated until after update var oldIndex = ui.item.sortable.index; // new Index because the ui.item is the node and the visual element has been reordered var newIndex = ui.item.index(); } });
你有几个可能性来检查旧的和新的位置。 我会把它们放入数组中。
$('#sortable').sortable({ start: function(e, ui) { // puts the old positions into array before sorting var old_position = $(this).sortable('toArray'); }, update: function(event, ui) { // grabs the new positions now that we've finished sorting var new_position = $(this).sortable('toArray'); } });
然后你可以很容易地提取你所需要的东西。
我正在寻找同样的问题的答案。 基于Frankie的贡献,我能够得到开始和结束的“订单”。 我有一个使用variables的variables范围的问题,所以我只是将它们存储为.data()而不是本地variables:
$(this).data("old_position",$(this).sortable("toArray"))
和
$(this).data("new_position",$(this).sortable("toArray"))
现在你可以像这样调用它(从更新/结束函数):
console.log($(this).data("old_position")) console.log($(this).data("new_position"))
信用仍然去弗兰基:)
这对我有效
$('#sortable').sortable({ start: function(e, ui) { // puts the old positions into array before sorting var old_position = ui.item.index(); }, update: function(event, ui) { // grabs the new positions now that we've finished sorting var new_position = ui.item.index(); } });
这对我有用,
$('#app').sortable({ handle: '.handle', start: function(evt, ui){ $(ui.item).data('old-ndex' , ui.item.index()); }, update: function(evt, ui) { var old_index = $(ui.item).data('old-ndex'); var new_index = ui.item.index(); alert('old_index -'+old_index+' new index -'+new_index); } });