Zhigalin / rowsorter

Drag & drop table row sorter pluging with touch support for Vanilla JS and jQuery.

RowSorter.js

Drag & drop row sorter plugin.

• Works on Touch devices.
• Supports IE8+ and all other modern browsers.
• No framework dependency (But registers itself as a jquery plugin if exists.)

Install

bower install rowsorter

<script type="text/javascript" src="/path/dist/RowSorter.js"></script>

Usage

<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>

Options:

@string   handler         : drag handler selector (default: null)
@boolean  tbody           : pass true if want to sort only tbody > tr. (default: true)
@string   tableClass      : adds this class name to table while rows are sorting (default: "sorting-table")
@string   dragClass       : dragging row's class name (default: "sorting-row").
@number   stickTopRows    : count of top sticky rows (default: 0),
@number   stickBottomRows : count of bottom sticky rows (default: 0),
@function onDragStart     : (default: null)
@function onDragEnd       : (default: null)
@function onDrop          : (default: null)

Handling Events

    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.');
    }

Samples

• Basic Usage
• Custom Handler 1
• Custom Handler 2
• Sticky Top & Bottom
• jQuery Plugin
• Custom CSS
• Big Table
• Mobile Sample
• Revert

File Sizes

• Minified: ~7kb
• Minified and gzipped: < 3kb