Drag and drop sorting on a web application? This thought is so far fetched several years ago - and now everybody is or can do that easily with jQuery. Looking at the tutorials and documentation in jQuery’s website, it lays out a simple method to call to make our list to become sortable.

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

With our corresponding HTML:

<ul id="sortable">
    <li>one</li>
    <li>two</li>
    <li>three</li>
    <li>four</li>
</ul>

Here is a demo on how that works.
Now what if we are using TABLE instead of UL or OL??

Easy - Use TBODY tag. So using the example above, let’s convert the list into a table:

<table id=anothersortable>
    <tbody class=content>
        <tr><td>one</td></tr>
        <tr><td>two</td></tr>
        <tr><td>three</td></tr>
        <tr><td>four</td></tr>
    </tbody>
</table>
[sourcecode]

Then our jQuery to be as such:
[sourcecode language="php"]
$(function() {
    $("#anothersortable tbody.content").sortable();
    $("#anothersortable tbody.content").disableSelection();
});
[sourcecode]
Click for demo for the simple table.
You can even make this having sub-sort - or with children sorting. Like this:
[sourcecode language="php"]
<table id=subsortsortable>
    <tbody class=content>
        <tr><td>one</td></tr>
        <tr><td>two</td></tr>
        <tr><td>
            <table><tbody class=subcontent>
                <tr><td>three.one</td></tr>
                <tr><td>three.two</td></tr>
            </tbody></table>
        </td></tr>
        <tr><td>four</td></tr>
    </tbody>
</table>

Adjust our jQuery to be as such:

$(function() {
   $("#subsortsortable tbody.content").sortable();
    $("#subsortsortable tbody.content").disableSelection();
     $("tbody.subcontent").sortable();
    $("tbody.subcontent").disableSelection();
});

Click for demo of this one.