example - jQuery UI Sortable, ¿cómo determinar la ubicación actual y la nueva ubicación en el evento de actualización?

sortable jquery ejemplos

Question

Yo tengo:

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

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

Answer 1

Cuando se invoca la función de actualización, 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 obtener una posición anterior y una 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 2

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 alcance variable al usar var, así que simplemente los almacené como .data () en lugar de vars locales:

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

y

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

ahora puede llamarlo así (desde las funciones de actualización / finalización):

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

El crédito sigue siendo para Frankie :)

Answer 3

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 4

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

Answer 5

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 6

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