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>

J'ai branché le update: function (événement, ui) {} mais je ne sais pas comment obtenir la position initiale et la nouvelle position 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 2 (index basé sur 0) et que la nouvelle position de l'élément 3 soit 0 . / p>

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 ensuite extraire facilement ce dont vous avez besoin.

Answer 4

Je cherchais une réponse au même problème. Sur la base des contributions de Frankie, j'ai pu obtenir 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"))

Nous remercions toujours Frankie:)

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

    }
});