JavaScript/jQuery: anime le mouvement li dans une liste?

Question

J'ai un code qui est fondamentalement identique à l'exemple Sortable jQuery UI ici:

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

Cela permet aux utilisateurs de réordonner les éléments LI dans un UL. Je suis maintenant dans une situation, cependant, où je veux animer la position changeante LI ... fondamentalement comme si l'utilisateur les avait traînés eux-mêmes. Cela s'avère beaucoup plus difficile que ce à quoi je m'attendais, puisque je n'anime pas un changement qui peut être exprimé en CSS, donc animate() de jQuery ne va pas aider.

I pourrait résoudre le problème en faisant quelques calculs et en positionnant absolument les éléments de la liste, mais cela semble carrément moche. Existe-t-il une manière élégante d'animer mes éléments de liste en mouvement?

Answer 1

Je ne sais pas si cela vous aidera, mais j'ai posté un script sur l'animation d'un objet après qu'il ait été déplacé dans this paste bin.

Essentiellement, vous animez le clone après l'élément est tombé:

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

Je créer un assistant div et animer cela en position, puis déplacer le réel li et détruire l'assistant.

Vous pouvez utiliser $('#li').clone() pour remplir votre assistant, puis positionner absolument l'assistant div en utilisant la position de $('#li'). offset(). Animez l'assistant à la nouvelle position ($('#target').offset()), détruisez l'assistant (.remove()), puis réorganisez votre <li> s.

Answer 3

Vous devriez vérifier Quicksand, qui vous permet de spécifier un autre ensemble de nœuds <li> pour remplacer ceux actuels avec et il va gérer tout l'animation est nécessaire pour transformer la liste existante en la nouvelle. La bibliothèque s'attend à ce que vous ayez un autre <ul> ou <ol> autour (que vous garderiez caché à l'utilisateur) pour représenter la nouvelle commande, mais vous pourriez automatiser la création d'une liste temporaire à cette fin afin que le code client peut simplement fournir un nouvel ordre pour les mêmes nœuds. Cependant, il est nécessaire d'échanger les nœuds avec de nouveaux nœuds, ce qui peut entraîner des complications si votre code s'attend à ce que les nœuds restent identiques.