Touch-enabled Drag’n’drop Table Ordering Plugin With JavaScript – table-dragger

Preview:

Description:

table-dragger is a dependency-free JavaScript library that allows to reorder table rows/columns via mouse drag & drop and touch tap & swipe. Also comes with an animation when moving items.

Basic usage:

Import the table-dragger into your project or include the table-dragger.min.js script directly in the html document.

npm install table-dragger --save

<script src="/path/to/table-dragger.min.js"></script>

Add the CSS class ‘handle’ to the html table headers and or cells where you want to display the drag handlers.

<table id="table">
  <thead>
  <tr>
    <th class='handle'>Header 1</th>
    <th class='handle'>Header 2</th>
    <th class='handle'>Header 3</th>
  </tr>
  </thead>
  <tbody>
  <tr>
    <td>Cell 1</td>
    <td>Cell 2</td>
    <td>Cell 3</td>
  </tr>
  </tbody>
</table>

The JavaScript to active the reordering functionality on the html table.

var el = document.getElementById('table');
var dragger = tableDragger(el, {
    dragHandler: '.handle'
});

All possible options with default values.

var el = document.getElementById('table');
var dragger = tableDragger(el, {

    // or 'row', 'free'
    mode: 'column', 

    // default: the first row or column
    dragHandler: '',

    // for 'row' mode
    onlyBody: false,

    // animation speed
    animation: 300

});

Events.

dragger.on('drop',function(){
  // Arguments: oldIndex, newIndex, el, mode
});

dragger.on('drag',function(){
  // Arguments: el, mode
});

dragger.on('shadowMove',function(){
  // oldIndex, newIndex, el, mode
});

dragger.on('out',function(){
  // Arguments: el, mode
});

Changelog:

09/19/2018

• Bugfix