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

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

Hai diverse possibilità di 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ò che ti serve.

Answer 3

Stavo cercando una risposta allo stesso problema. sulla base di ciò che Frankie ha contribuito, sono stato in grado di ottenere sia gli "ordini" di inizio e di fine. Ho avuto un problema con scope delle variabili utilizzando il var, quindi ho solo li memorizzati come .data() al posto di Vars locali:

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

e

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

ora si può chiamare in questo modo (dalle funzioni di aggiornamento/fine):

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

credito va ancora a Frankie :)

Answer 4

Quando si richiama la funzione di aggiornamento, ui.item.sortable non è stato aggiornato, tuttavia l'elemento dell'interfaccia utente è stato spostato visivamente.
Ciò consente alla funzione di aggiornamento di ottenere la posizione precedente 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 5

questo ha lavorato 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); 

    } 
});