trileuco/table-dragger

Easily drag and drop sorting table

table-dragger

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

Demo

Try out the demo!

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

• You can set accepts to a method with the following signature: (el, target, source, sibling). It'll be called to make sure that an element el, that came from container source, can be dropped on container target before a sibling element. The sibling can be null, which would mean that the element would be placed as the last element in the container. Note that if options.copy is set to true, el will be set to the copy, instead of the originally dragged element.

  Also note that the position where a drag starts is always going to be a valid place where to drop the element, even if accepts returned false for all cases.

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