紹

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

Github

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

特征

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

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

安裝使用

• 安裝

可以在npm上獲得它：

npm install table-dragger --save

或者引用壓縮的js文件

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

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

npm install table-dragger@next --save

• 快速入門

請看以下代碼：

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,
});
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！~

現一個簡單的拖動排序效果

效果如下：

可以拖動排序上下的位置

實現代碼

html:

css:

javascript：

言

HTML5 中提供了直接拖放的 API，極大的方便我們實現拖放效果，不需要去寫一大堆的 js，只需要通過監聽元素的拖放事件就能實現各種拖放功能。

想要拖放某個元素，必須設置該元素的 draggable 屬性為 true，當該屬性為 false 時，將不允許拖放。而 img 元素和 a 元素都默認設置了 draggable 屬性為 true，可直接拖放，如果不想拖放這兩個元素，把屬性設為 false 即可。

拖放事件

拖放事件由不同的元素產生。一個元素被拖放，他可能會經過很多個元素上，最終到達想要放置的元素內。這里，我暫時把被拖放的元素稱為源對象，被經過的元素稱為過程對象，到達的元素我稱為目標對象。不同的對象產生不同的拖放事件。

源對象：

• dragstart：源對象開始拖放。
• drag：源對象拖放過程中。
• dragend：源對象拖放結束。

過程對象：

• dragenter：源對象開始進入過程對象范圍內。
• dragover：源對象在過程對象范圍內移動。
• dragleave：源對象離開過程對象的范圍。

目標對象：

• drop：源對象被拖放到目標對象內。

<div id="source" draggable="true">a元素</div>
<div id="process">b元素</div>
<div id="target">c元素</div>
<script>
 var source = document.getElementById('source'), // a元素
 process = document.getElementById('process'), // b元素
 target = document.getElementById('target'); // c元素
 
 source.addEventListener('dragstart',function(ev){ // dragstart事件由a元素產生
 console.log('a元素開始被拖動');
 },false)
 process.addEventListener('dragenter',function(ev){ // dragenter事件由b元素產生
 console.log('a元素開始進入b元素');
 },false)
 process.addEventListener('dragleave',function(ev){ // dragleave事件由b元素產生
 console.log('a元素離開b元素');
 },false)
 target.addEventListener('drop',function(ev){ // drop事件由c元素產生
 console.log('a元素拖放到c元素了');
 ev.preventDefault();
 },false)
 document.ondragover = function(e){e.preventDefault();}
</script>

dataTransfer 對象

在所有拖放事件中提供了一個數據傳遞對象 dataTransfer，用于在源對象和目標對象間傳遞數據。接下來認識一下這個對象的方法和屬性，來了解它是如何傳遞數據的。

setData()

該方法向 dataTransfer 對象中存入數據。接收兩個參數，第一個表示要存入數據種類的字符串，現在支持有以下幾種：

• text/plain：文本文字。
• text/html：HTML文字。
• text/xml：XML文字。
• text/uri-list：URL列表，每個URL為一行。

第二個參數為要存入的數據。例如：

event.dataTransfer.setData('text/plain','Hello World');

getData()

該方法從 dataTransfer 對象中讀取數據。參數為在 setData 中指定的數據種類。例如：

event.dataTransfer.getData('text/plain');

clearData()

該方法清除 dataTransfer 對象中存放的數據。參數可選，為數據種類。若參數為空，則清空所有種類的數據。例如：

event.dataTransfer.clearData();

setDragImage()

該方法通過用img元素來設置拖放圖標。接收三個參數，第一個為圖標元素，第二個為圖標元素離鼠標指針的X軸位移量，第三個為圖標元素離鼠標指針的Y軸位移量。例如：

var source = document.getElementById('source'),
 icon = document.createElement('img');
icon.src = 'img.png';
source.addEventListener('dragstart',function(ev){
 ev.dataTransfer.setDragImage(icon,-10,-10)
},false)

effectAllowed 和 dropEffect 屬性

這兩個屬性結合起來設置拖放的視覺效果。

值得注意的是：dataTransfer 對象不支持IE。對，不支持IE。

實現拖放排序

上面已經熟悉了拖放 API 的使用，我們來實現個簡單的拖放排序，這也是在項目中比較常見的。先來理一下思路：

• 在一個列表中，每個元素都可以被拖放，那首先要給每個元素設置 draggable 屬性為 true。
• 監聽每個元素的 dragstart 事件，對源對象做樣式處理來區分。
• 監聽每個元素的 dragenter 事件，當源對象進入到當前元素里，就把源對象添加到該元素之前。這樣子后面的元素就會被源對象擠下去了，實現了排序的效果。
• 但是會發現，源對象無法排到最后一個去，只能在倒數第二。這時就要監聽 dragleave 事件，當過程對象是最后一個元素時，源對象離開了過程對象，這時就把源對象添加到最后去。

主要代碼如下：

var source = document.querySelectorAll('.list'),
 dragElement = null;
for(var i = 0; i < source.length; i++){
 source[i].addEventListener('dragstart',function(ev){
 dragElement = this;
 },false);
 source[i].addEventListener('dragenter', function(ev){
 if(dragElement != this){
 this.parentNode.insertBefore(dragElement,this);
 }
 }, false)
 source[i].addEventListener('dragleave', function(ev){
 if(dragElement != this){
 if(this == this.parentNode.lastElementChild || this == this.parentNode.lastChild){
 this.parentNode.appendChild(dragElement);
 }
 }
 }, false)
};
document.ondragover = function(e){e.preventDefault();}
document.ondrop = function(e){e.preventDefault();}

兼容

主要是在IE中的兼容不太好，不過至少在IE10中能兼容上面的拖動排序。

而且在我簡單的試驗中發現，就是在 IE 中元素不設置 height 的時候，不會觸發 dragleave 事件。

更重要的一點是在 ios 和安卓上，完全不兼容。不過還好，有一個插件能讓它在移動端完美兼容。

插件地址：ios-html5-drag-drop-shim

只需要在原有的代碼中引入該插件，即可在移動端上實現拖動了。

<script>
var iosDragDropShim = { enableEnterLeave: true }
</script>
<script src="vendor/ios-drag-drop.js"></script>

https://zhuanlan.zhihu.com/p/26666141