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">

J'ai branché le
mais je ne sais pas comment obtenir la position originale et la nouvelle position de l'élément. Si je déplace l'élément 3 au-dessus de l'élément 1, je veux que la position d'origine soit 2 (index basé sur 0) et que la nouvelle position de l'élément 3 soit 0 .

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

Lorsque la fonction de mise à jour est appelée, le fichier ui.item.sortable n'a pas été mis à jour, mais l'élément d'interface utilisateur s'est déplacé visuellement.
Cela 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 3

Vous avez plusieurs possibilités pour vérifier l'ancien et le nouveau poste. 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 alors extraire facilement ce dont vous avez besoin.

Answer 4

Je cherchais une réponse au même problème. sur la base de ce que Frankie a contribué, j'ai pu obtenir à la fois les "commandes" de début et de fin. J'ai eu un problème avec la portée variable en utilisant la var, donc je les ai juste stockés comme .data () au lieu de vars locaux:

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

et

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

maintenant vous pouvez l'appeler comme ceci (depuis les fonctions update / end):

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

Le crédit va toujours à Frankie :)