Github

https://github.com/sindu12jun/table-dragger

特色

Table-draagger由于其以下几个特色而让拖拽和排序的实现变得如此大略：

html表格排序轻松实现HTML表格拖拽和排序实现庞杂交互式数据表变得更简略 CSS

非常随意马虎配置能够同时对列或行进行排序排序时动画流畅没有臃肿的依赖供应触摸事宜（意味着在触摸设备可以实现一些你想要的功能）

安装利用安装

可以在npm上得到它：

npm install table-dragger --save

或者引用压缩的js文件

<script src=\公众../node_modules/table-dragger/dist/table-dragger.min.js\"大众&gt;</script>

或者考试测验开拓中的不稳定版本

npm install table-dragger@next --save快速入门

请看以下代码：

import tableDragger from 'table-dragger'tableDragger(el, options?)

<table id=\公众table\"大众><thead><tr><th class='b5cc923201070554 handle'>header1</th><th class='9232010705547d6a 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,});dragger.on('drop',function(from, to){console(from);console(to);});

你可以在不设置任何参数的情形下利用默认的拖拽和排序办法，当然以下是你可以配置的选项：

options.mode

1、将mode设置为column，用户拖动和排序表的列

2、将mode设置为row，用户拖动并排序表的行

3、设置mode为free，用户根据点击后鼠标移动的方向拖动行或列。
把稳，必须在自由模式下指定dragHandler。

options.dragHandler

dragHandler是表中的拖动句柄选择器默认情形下，在列模式下，dragHandler是表的第一行；在行模式下，则是第一列。

options.onlyBody

在行模式下将onlyBody设置为true时，用户只能在tbody中提升行。

API

下面是返回工具的API

tableDragger(document.querySelector('#event-table'), { mode: 'free', dragHandler: '.handle', onlyBody: true }).on('drag', () => {console.log('drag');}).on('drop', (from, to, el, mode) => {console.log(`drop ${el.nodeName} from ${from} ${mode} to ${to} ${mode}`);}).on('shadowMove', (from, to, el, mode) => {console.log(`move ${el.nodeName} from ${from} ${mode} to ${to} ${mode}`);}).on('out', (el, mode) => {console.log(`move out or drop ${el.nodeName} in mode ${mode}`);});

总结

Table-draagger为我们节省了很多手动封装表格排序和拖拽功能的韶光，当然目前很多第三方框架已经实现了类似的功能，这更适用于原生的html表格，你还可以通过一些手段影象用户拖拽，这只是个中一种思路，Enjoy it！
~