jQuery UI Sortable, como para determinar a localização atual e nova localização no evento de atualização?
-
05-07-2019 - |
Pergunta
Eu tenho:
<ul id="sortableList">
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ul>
Eu conectado ao update: function(event, ui) { }
mas não estou certo de como obter a posição original e novo do elemento. Se eu mover o item 3 para ser acima do ponto 1, eu quero a posição original para ser 2 (0 índice baseado) e a nova posição do item 3 para ser 0 .
Solução
$('#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');
}
});
Outras dicas
Quando a função de atualização é invocado o ui.item.sortable não foi atualizado, porém o elemento UI tem visualmente movido.
Isso permite que você na função de atualização para conseguir a posição antiga e nova posição.
$('#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();
}
});
Você tem várias possibilidades para verificar a velha ea nova posição. Gostaria de colocá-los em arrays.
$('#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 então você pode facilmente extrair o que você precisa.
Eu estava procurando uma resposta para o mesmo problema. com base no que Frankie contribuiu, eu era capaz de obter tanto o início e "ordens" finais. Eu tive um problema com o escopo de variáveis ??usando o var, então eu só armazenados-los como .data () em vez de vars locais:
$(this).data("old_position",$(this).sortable("toArray"))
e
$(this).data("new_position",$(this).sortable("toArray"))
Agora você pode chamá-lo desse jeito (a partir das funções de atualização / fim):
console.log($(this).data("old_position"))
console.log($(this).data("new_position"))
Credit ainda vai para Frankie:)
Isso funcionou para mim
$('#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();
}
});
Isso funciona para mim,
$('#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);
}
});