TableDnd

Links

TableDnD, Table Drag and Drop JQuery plugin For example code see django-todo source code

Download

Download jquery.tablednd_0_5.js.zip from the above site.

Install

I extracted the archive and re-named to jquery.tablednd.js.

Usage

Include jQuery and jquery.tablednd.js at the top of your html file:

<script type="text/javascript" src="/site_media/jquery.js"></script>
<script type="text/javascript" src="/site_media/jquery.tablednd.js"></script>

The HTML for the table is very straight forward (no Javascript, pure HTML):

<table id="table-1" cellspacing="0" cellpadding="2">
    <tr id="1"><td>1</td><td>One</td><td>some text</td></tr>
    <tr id="2"><td>2</td><td>Two</td><td>some text</td></tr>
    <tr id="3"><td>3</td><td>Three</td><td>some text</td></tr>
</table>

To add in the draggability all we need to do is add a line to the $(document).ready(...) function as follows:

<script type="text/javascript">
    $(document).ready(function() {
        // Initialise the table
        $("#table-1").tableDnD();
    });
</script>