jQuery UI ordenable, cómo determinar la ubicación actual y la nueva ubicación en el evento de actualización?

Question

que tengo:

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

he conectado en el update: function(event, ui) { } pero no estoy seguro de cómo obtener la posición original y nuevo del elemento. Si muevo el ítem 3 para estar arriba del ítem 1, quiero que la posición original sea (índice basado en 0) y la nueva posición del ítem 3 sea .

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

Tiene varias posibilidades para verificar la posición anterior y la nueva. Yo los pondría en matrices.

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

Y luego puede extraer fácilmente lo que necesita.

Answer 3

Estaba buscando una respuesta al mismo problema. en base a lo que contribuyó Frankie, pude obtener los "pedidos" iniciales y finales. Tuve un problema con el ámbito de las variables utilizando la var, por lo que sólo los guardó como .data() en lugar de VARs locales:

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

y

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

ahora se le puede llamar de esta manera (de las funciones de actualización/end):

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

crédito todavía va a Frankie :)

Answer 4

Cuando se invoca la función de actualización, el ui.item.sortable no se ha actualizado, sin embargo, el elemento de la interfaz de usuario se ha movido visualmente.
Esto le permite en la función de actualización para obtener la posición anterior y la nueva posición.

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

Esto funcionó para mí

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

Esto funciona para mí,

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

    } 
});