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

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

Usage

<scripttype="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 elementvartable=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 elementvartable=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