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); } });