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.
You can get it on npm.
npm install table-dragger --save
or
<script src="../node_modules/table-dragger/dist/table-dragger.min.js"></script>
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
mode
to column
, user drag and sort columns of tablemode
to row
, user drag and sort rows of tablemode
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 tablecolumn
mode, dragHandler
is the first row of table; in row
mode, the first column.options.onlyBody
onlyBody
to true
in row
mode, user can only lift rows in tbody
.options.animation
300
— without animationThe 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.
MIT
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。