绍

我们都知道普通的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