Move list item to top of unordered list using jQuery

Question

Lets say i have the following unordered list

 
Hank
 
Alice
 

        

Answer 1

I came up with a solution that seems to work pretty well. It's a proof of concept, so you'll probably have to modify it a bit to work better for your specific case. Also, I only tested it in Firefox, but I don't see any reason why this wouldn't work in all the browsers. Anyway, here it is:

 
Hank
 
Alice
 
Tom
 
Ashlee

It calculates the difference in offsets between the clicked LI and first LI and moves the clicked one up to the top by setting its position to relative and animating the top property. Similarly, it calculates how much space was left behind by the clicked LI and moves all the previous ones down accordingly. When it's done with the animations, it rearranges the DOM to match the new order and restores the positioning styles.

Hope that helps!