web-dev-qa-db-fra.com

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

J'ai:

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

J'ai connecté la update: function(event, ui) { } mais je ne sais pas comment obtenir la position originale et nouvelle 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 la nouvelle position de l'élément 3 soit .

jquery-uijquery-ui-sortable
43
Amir
$('#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');
    }
});
89
Rush Frisby

Lorsque la fonction de mise à jour est invoquée, 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();
        }    
});
18
Richard Friedman

Vous avez plusieurs possibilités pour vérifier l'ancien et le nouveau poste. Je les mettrais en 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.

10
Frankie

Je cherchais une réponse au même problème. sur la base de ce que Frankie a contribué, 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 le var, donc je les ai juste stockés en tant que .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 (à partir des fonctions de mise à jour/fin):

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

Le mérite revient toujours à Frankie :)

5
jasonmcleod

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();
}
});
4
Nicwenda

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

    }
});
1
marlonpd