JavaScript / jQuery: animate li movement inside a list?

Question

I have code that is basically identical to the jQuery UI Sortable example here:

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

This allows users to reorder LI elements in UL. However, I came across a situation where I want to revive the changing position of LI ... basically, as if the user himself dragged them. This turned out to be much more complicated than I expected, since I am not animating the changes that can be expressed in CSS, so jQuery animate () will not help.

I could solve the problem by doing some math and absolutely positioning the list items, but that seems completely ugly. Is there an elegant way to animate my list items?

Answer 1

I'm not sure if this will help you, but I placed some script when animating an object after dragging it into this bin paste .

Essentially, you animate the clone after deleting the element:

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

I will create a helper div and animate it to the desired position, then move the actual li and destroy the helper.

You can use $('#li').clone() to populate your helper, and then place the auxiliary div using the position from $('#li'). offset() $('#li'). offset() . Animate the helper in a new position ( $('#target').offset() ), destroy the helper ( .remove() ), and then reorder your <li> s.

Answer 3

You should check out Quicksand , which allows you to specify a different set of <li> nodes to replace the current ones, ll handle any animation needed to convert an existing list to a new one.

The library expects you to have another <ul> or <ol> (which you would hide from the user) to introduce a new order, but you could automate the creation of a temporary list for this purpose, so that client code can simply provide a new order for the same nodes. This should somehow change the nodes to new ones, although this can cause complications if your code expects the nodes to remain the same.