reorder list elements with mouse jquery

Question

I have floating list elements and I want to make them draggable with mouse and move them to reorder. The structure is as follows:

<ul>
    <li>item1</li>
    <li>item2</li>
    <li>item3</li>
    <li>item4</li>
</ul>

What is the best way to do it?

Answer 1

use jquery UI for this purpose!

http://jqueryui.com/sortable/

$(function() {
    $( "ul" ).sortable();
    $( "ul" ).disableSelection();
});

Answer 2

You need to add jquery ui library along with core one.

Please check out this demo

You can drag and drop the list elements.

 $( "ul" ).sortable();