Watch 1 Star 0

码云极速下载 / table-draggerMIT

Sign up for free
Explore and code with more than 2 million developers,Free private repositories !:)
Sign up
此仓库是为了提升国内下载速度的镜像仓库,每日同步一次。 原始仓库:
Nothing here. spread retract

Clone or download


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



Try out the demo!


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


  • 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


You can get it on npm.

npm install table-dragger --save


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


import tableDragger from 'table-dragger'

tableDragger(el, options?)
<table id="table">
    <th class='handle'>header1</th>
    <th class='handle'>header2</th>
var el = document.getElementById('table');
var dragger = tableDragger(el, {
  mode: 'row',
  dragHandler: '.handle',
  onlyBody: true,
  animation: 300
dragger.on('drop',function(from, to){

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

The options are detailed below.


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


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


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


  • ms, animation speed moving items when sorting, 300 — without animation


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


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


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



Comments ( 0 )

You need to Sign in for post a comment

Help Search