JavaScript/jQuery: animar movimiento li dentro de una lista?

Question

Tengo un código que es básicamente idéntico al ejemplo jQuery UI Sortable aquí:

http://jqueryui.com/demos/sortable/#default

Esto permite a los usuarios elementos LI reordenar dentro de un UL. Sin embargo, ahora me he encontrado con una situación en la que quiero animar la posición de cambio de LI ... básicamente como si el usuario la hubiera arrastrado ella misma. Esto está demostrando ser mucho más difícil de lo que esperaba, ya que no estoy animando un cambio que se puede expresar en CSS, por lo que el archivo animado de jQuery no va a ayudar.

I podría resolver el problema haciendo algunas operaciones matemáticas y colocando absolutamente los elementos de la lista, pero eso parece francamente feo. ¿Hay una manera elegante de animar mis elementos de lista moviéndose?

Answer 1

No estoy seguro de si esto lo ayudará, pero publiqué algunos guiones para animar un objeto después de haber sido arrastrado en this paste bin.

En esencia, se anima el clon después de que el elemento se deja caer:

$("#droppable").droppable({ 
    drop: function(e, ui) { 
    $(this).addClass('ui-state-highlight'); 
    var x = ui.helper.clone(); 
    x.appendTo('body') 
    // move clone to original drag point 
    .css({position: 'absolute',top: ui.draggable.position().top,left:ui.draggable.position().left}) 
    .animate({ 
    // animate clone to droppable target 
    top: $(this).position().top, left: $(this).position().left}, 
    // animation time 
    1500, 
    // callback function - once animation is done 
    function(){ 
     x.find('.caption').text("I'm being munched on!"); 
     ui.draggable.addClass('fade'); 
     // remove clone after 500ms 
     setTimeout(function(){ x.remove(); }, 500) 
    } 
    ); 
    // remove the helper, so it doesn't animate backwards to the starting position (built into the draggable script) 
    ui.helper.remove(); 
    } 
}); 

Answer 2

Crearía un helper div y lo animaría en su posición, luego movería el li real y destruiría el helper.

Puede usar $('#li').clone() para llenar su ayudante, luego posicionar completamente al ayudante div usando la posición desde $('#li'). offset(). Anima al ayudante a la nueva posición ($('#target').offset()), destruye al ayudante (.remove()) y luego reordena tu <li> s.

Answer 3

Debe retirar Quicksand, que le permite especificar otro conjunto de nodos <li> para reemplazar a los actuales con y que va a manejar lo que sea la animación es necesaria para transformar la lista existente en la nueva.

La biblioteca espera que tenga otro <ul> o <ol> (que mantendría oculto para el usuario) para representar el nuevo pedido, pero podría automatizar la creación de una lista temporal para tal fin para que el código del cliente solo puede suministrar un nuevo pedido para los mismos nodos. Sin embargo, necesita intercambiar los nodos por otros nuevos, lo que puede causar complicaciones si su código espera que los nodos permanezcan iguales.