Drag & drop table row sorter pluging with touch support for Vanilla JS and jQuery.
JavaScript
Clone or download
Permalink
Failed to load latest commit information.
dist shims have been removed Nov 27, 2015
examples shims have been removed Nov 27, 2015
src shims have been removed Nov 27, 2015
.gitignore version 2.0.0 Sep 22, 2015
CHANGES shims have been removed Nov 27, 2015
Gruntfile.js shims have been removed Nov 27, 2015
LICENSE LICENSE Oct 7, 2014
README.md revert methods renamed to undo. Jan 2, 2016
TODO shims have been removed Nov 27, 2015
bower.json v2.1.1 Jan 2, 2016
package.json v2.1.0 Oct 3, 2015

README.md

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

File Sizes

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