<script type="text/javascript">
//// No Framework
// Set table as sortable
new RowSorter('#table_id'/*, options*/);
// Undo last drag
RowSorter.undo('#table_id');
// Destroy sortable
RowSorter.destroy('#table_id');

//// jQuery Plugin
// Set table as sortable
$('#table_id').rowSorter(/*options*/);
// Undo last drag
$.rowSorter.undo('#table_id');
// Destroy sortable
$.rowSorter.destroy('#table_id');
</script>

    onDragStart: function(tbody, row, old_index) {
        // find the table
        // if options.tbody is true, this param will be tbody element
        // otherwise it will be table element
        var table = tbody.tagName === "TBODY" ? tbody.parentNode : tbody;

        // old_index is zero-based index of row in tbody (or table if tbody not exists)
        console.log(table, row, old_index);
    },

    // if new_index === old_index, this function won't be called.
    onDrop: function(tbody, row, new_index, old_index) {
        // find the table
        // if options.tbody is true, this param will be tbody element
        // otherwise it will be table element
        var table = tbody.tagName === "TBODY" ? tbody.parentNode : tbody;

        // old_index is stored index of row in table/tbody before start the dragging.
        // new_index is index of row in table/tbody after the row has been dragged.
        console.log(table, row, new_index, old_index);
    },

    // if new_index === old_index, this function will be called.
    onDragEnd: function(tbody, row, current_index) {
        console.log('Dragging the ' + current_index + '. row canceled.');
    }