JQuery / JavaScript: reorder an unordered list using drag and drop

Question

I have an unordered list <ul> with a list <li> that I would like to "reorder" using drag and drop. I am using jQuery. How could I do this? I tried to connect to the click event, but I cannot get it to work correctly (I want other <li> elements to go out of the way as soon as I drag the <li> element over a suitable place so that the user can see where it ends).

reference

Answer 1

If you do not need to reinvent the wheel:

http://jqueryui.com/demos/sortable

Answer 2

Have you considered the jQuery UI droppable / draggable function?

Here is a link to the ul.

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