jQuery UI Sortable, comment déterminer l'emplacement actuel et le nouvel emplacement dans l'événement de mise à jour?

Question

J'ai:

<ul id="sortableList"> 
    <li>item 1</li> 
    <li>item 2</li> 
    <li>item 3</li> 
</ul> 

Je câblé dans le update: function(event, ui) { } mais je ne suis pas sûr de savoir comment obtenir la position initiale et nouvelle de l'élément. Si je déplace l'élément 3 au-dessus de l'élément 1, je souhaite que la position d'origine soit (index 0) et que la nouvelle position de l'élément 3 soit .

Answer 1

$('#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'); 
    } 
}); 

Answer 2

Vous avez plusieurs possibilités pour vérifier l'ancienne et la nouvelle position. Je les mettrais dans des tableaux.

$('#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'); 
    } 
}); 

Et vous pouvez ensuite facilement extraire ce dont vous avez besoin.

Answer 3

Je cherchais une réponse au même problème. En fonction de ce que Frankie a contribué, j'ai pu obtenir les «ordres» de début et de fin. J'ai eu un problème avec une portée variable à l'aide du var, alors je les ai simplement stockés en tant que .data() au lieu de vars locales:

$(this).data("old_position",$(this).sortable("toArray")) 

et

$(this).data("new_position",$(this).sortable("toArray")) 

maintenant, vous pouvez l'appeler comme celui-ci (des fonctions mise à jour/fin):

console.log($(this).data("old_position")) 
console.log($(this).data("new_position")) 

le crédit va encore Frankie :)

Answer 4

Lorsque la fonction de mise à jour est invoquée, l'ui.item.sortable n'a pas été mise à jour, mais l'élément de l'interface utilisateur a été déplacé visuellement.
Ceci vous permet dans la fonction de mise à jour d'obtenir l'ancienne position et la nouvelle position.

$('#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(); 
     }  
}); 

Answer 5

Cela a fonctionné pour moi

$('#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(); 
} 
}); 

Answer 6

Cela fonctionne pour moi,

$('#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); 

    } 
});