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
Usage
import tableDragger from 'table-dragger'
tableDragger(el, options?)
header1 header2 conten1 conten2
var el = document;var dragger = ;dragger;
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
tocolumn
, user drag and sort columns of table - Setting
mode
torow
, user drag and sort rows of table - Setting
mode
tofree
, user drag rows or columns, depending on the direction of the mouse movement after tapping. Notice you have to specifydragHandler
infree
mode.
options.dragHandler
dragHandler
is drag handle selector within table- By default, when in
column
mode,dragHandler
is the first row of table; inrow
mode, the first column.
options.onlyBody
- Setting
onlyBody
totrue
inrow
mode, user can only lift rows intbody
.
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