Interfaccia utente jQuery Ordinabile, come determinare la posizione corrente e la nuova posizione nell'evento di aggiornamento?

Question

Ho:

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

Ho collegato update: function (event, ui) {} ma non sono sicuro di come ottenere la posizione originale e nuova dell'elemento. Se sposto l'elemento 3 sopra l'elemento 1, voglio che la posizione originale sia 2 (indice basato su 0) e che la nuova posizione dell'articolo 3 sia 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

Quando viene invocata la funzione di aggiornamento, ui.item.sortable non è stato aggiornato, tuttavia l'elemento dell'interfaccia utente si è spostato visivamente.
Ciò consente nella funzione di aggiornamento di ottenere la vecchia posizione e la nuova posizione.

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

Hai diverse possibilità per controllare la vecchia e la nuova posizione. Li metterei in array.

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

E puoi quindi estrarre facilmente ciò di cui hai bisogno.

Answer 4

Stavo cercando una risposta allo stesso problema. sulla base di ciò che Frankie ha contribuito, sono stato in grado di ottenere sia l'inizio che la fine degli "ordini". Ho avuto un problema con ambito variabile usando il var, quindi li ho appena archiviati come .data () invece di vars locali:

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

e

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

ora puoi richiamarlo in questo modo (dalle funzioni di aggiornamento / fine):

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

Il merito va ancora a Frankie :)

Answer 5

Questo ha funzionato per me

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

Questo funziona per me,

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

    }
});