jQuery/JavaScript: Reorder Unordered List via Dragging

Question

I have an unordered list <ul> with list items <li> which I'd like to be able to "reorder" via dragging. I'm using jQuery. How could I accomplish this? I tried hooking into the click event but I can't get the drag to work right (I want the other <li> elements to move out of the way once I drag an <li> element over a suitable spot so the user can see where it would end up).

Help?

Answer 1

If you don't need to invent the wheel:

http://jqueryui.com/demos/sortable

Answer 2

Have you considered jQuery UI's droppable/draggable functionality?

Here's a link to a ul demo.

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