Inspiration

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

Features

Super easy to set up
Cellspacing, cellpadding, col and colgroup in account
Able to sort columns or rows at the same time
Smooth animation when sort
No bloated dependencies
Touch events

Install

You can get it on npm.

npm install table-dragger --save

or

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

Usage

import tableDragger from 'table-dragger'

tableDragger(el, options?)

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

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

And you could also not set any options, which defaults to drag with the default options.

The options are detailed below.

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

dragHandler is drag handle selector within table
By default, when in column mode, dragHandler is the first row of table; in row mode, the first column.

`options.onlyBody`

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

`options.animation`

ms, animation speed moving items when sorting, 300 — without 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)`

The dragger is an event emitter. The following events can be tracked using dragger.on(type, listener):

Event Name	Listener Arguments	Event Description
`drag`	`el, mode`	`el` is the origin table, `mode` is `column` or `row`, shows the mode user sort
`drop`	`oldIndex, newIndex, el, mode`	`oldIndex` is the index before sorting. `newIndex` is the index after sorting
`shadowMove`	`oldIndex, newIndex, el, mode`	trigger when column(row) is being lifted and moving into other column(row) place.
`out`	`el, mode`	column(row) was dragged out of `el`, or dropped

`dragger.dragging`

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

`dragger.destroy`

Removes all drag and drop events used by table-dragger to manage drag and drop.

License

MIT