介紹

我們都知道普通的HTML自帶的功能相對有限，很多複雜的交互式場景，如果手動去寫功能的話會非常的複雜，而且可擴展性差，就拿HTML表格來說，對於初學者或者對於複雜的拖拽式交互編程不熟悉的話會很浪費時間，因此今天就介紹一個第三方的插件——Table-draagger，來輕鬆實現類似的功能。Table-draagger是用於構建可重排序的拖放表的極簡主義純Javascript庫！

Github

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

特徵

Table-draagger因為其以下幾個特徵而讓拖拽和排序的實現變得如此簡單：

• 非常容易配置
• 能夠同時對列或行進行排序
• 排序時動畫流暢
• 沒有臃腫的依賴
• 提供觸摸事件（意味著在觸摸設備可以實現一些你想要的功能）

安裝使用

• 安裝

可以在npm上獲得它：

npm install table-dragger --save

或者引用壓縮的js文件

或者嘗試開發中的不穩定版本

npm install table-dragger@next --save

• 快速入門

請看以下代碼：

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

header1
header2
conten1
conten2

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！~