Sortable similar with youtube homepage

Question

Hi guys!

I'm trying to achieve an effect similar with youtube home page (you must be logged in so I posted a small movie to explain this): we have a basic sortable (vertical only) but on each sortable item we have a "move up" and a "move down" button. Those buttons do... exactly what it says: move each item with a neat animation move or down.

So, I'm thinking that works very similar with sortable: it makes a helper (that is the animated element) then, after the animation is complete, the DOM is altered with new positions.

So, any idea is welcome!

---

I made a small test in firebug. I can clone the element with this:

$('.hslider:first').clone(true).insertAfter('.hslider:first')

But the main problem is that I have some JS binded on elements inside of .hslider. Even that some keep works, other (like jquery UI slider) don't. There is a way doing this without reinitialize the whole js? I tried to take a look at jquery UI source but... I'm not THAT good on js/jquery to be able to decode anything useful (yes, the source was uncompressed :P )

---

Edit:

I found something similar here but I really don't want to load another 40kb+ only for this effect (especially when I already have jQuery loaded)

Answer 1

Why don't you use the live() method available in jQuery 1.3+. That will ensure that your elements even after being inserted anew, will have the event bindings preserved. Live basically binds js routines to all existing and future matched elements. No extra's required to be loaded ;)