Finally, you are able to drag and sort your table as you want.

Try out the demo!

Inspiration

Table-dragger is a minimalist plain Javascript library for building reorderable drag-and-drop table.

Features

Install

You can get it on npm.

npm install table-dragger --saveCopy the code

or

<script src="../node_modules/table-dragger/dist/table-dragger.min.js"></script>Copy the code

Usage

import tableDragger from 'table-dragger'

tableDragger(el, options?)
Copy the code

<table id="table">
  <thead>
  <tr>
    <th class='handle'>header1</th>
    <th class='handle'>header2</th>
  </tr>
  </thead>
  <tbody>
  <tr>
    <td>conten1</td>
    <td>conten2</td>
  </tr>
  </tbody>
</table>Copy the code

var el = document.getElementById('table');
var dragger = tableDragger(el, {
  mode: 'row',
  dragHandler: '.handle',
  onlyBody: true,
  animation: 300
});
dragger.on('drop'.function(from.to) {console(from);
  console(to);
});Copy the code

options.mode

• Setting mode to column, user drag and sort columns of table
• Setting mode to row, user drag and sort rows of table
• Setting mode to free, user drag rows or columns, depending on the direction of the mouse movement after tapping. Notice you have to specify dragHandler in free mode.

options.dragHandler

options.onlyBody

• Setting onlyBody to true in row mode, user can only lift rows in tbody.

options.animation

API

The tableDragger method returns a tiny object with a concise API. We’ll refer to the API returned by tableDragger as dragger

dragger.on (Events)

dragger.dragging

This property will be true whenever an element is being dragged.

dragger.destroy

License

MIT