实现一个美化原生拖拽的draggable-polyfill

拖拽的实现

在HTML5还未普及以前，实现元素的拖拽还算是一件比较麻烦的事，大概思路就是监听鼠标移动相关事件，下面是伪代码

oDiv.onmousedown = function(ev){
    //记录起始位置
}
document.onmousemove = function(ev){
    //移动目标元素
}
document.onmouseup = function(ev){
    //取消鼠标移动事件
}
复制代码

HTML5新增了拖放draggable标准，拖拽就变得简单了，只须要经过监听元素的拖放事件就能实现各类拖放功能。

<div draggable="true">drag me</div>
复制代码

除了设置draggable="true"属性外，默认状况下img、连接默认是可拖拽的

固然，设置draggable="true"元素仅仅是“可拖拽”，松手后就还原，若是须要拖拽到指定位置仅须要在drop记录一下就好了

dropbox.addEventListener('drop',function(ev){
    dragbox.style.left = XX;
    dragbox.style.top = XX;
})
复制代码

原生的拖拽

原生拖拽有不少优点，你们能够自行去了解一下，就比如原生和模拟器的区别。

可是，稍微有点审美追求的确定不会用原生默认的拖拽，由于实在是不怎么好看。

下面先看看原生的拖拽效果

原生的拖拽效果

原生默认的拖拽效果是一个半透明的预览图（暂且称为“幽灵”吧），若是拖拽的元素尺寸比较小的话，生成的预览图还能够接受，只是半透明而已，以下

若是大一点就没法接受了，“幽灵”就不仅是半透明，并且还有从鼠标位置向外扩散的渐变效果（真不知道是怎么设计的，多是为了性能考虑吧），反正就是很难看吧，以下

其次，还有一个效果是被拖拽的元素仍保持不动，只是被拖拽出来的“幽灵”在移动，若是背景复杂一点，那么就彻底分不清了，好比下面的拖拽排序（仔细找找上面的“幽灵”）

功能是有了，但确实分不清，也谈不上什么体验了

自定义原生的拖拽

原生的拖拽基本上是没法自定义的，惟一能够更改的只有setDragImage方法，能够指定一张预览图来代替默认放入预览图，然而这种方式也很鸡肋，自定义的预览图仍然和默认的效果一直，都是半透明的，其次，实时生成当前节点的预览图也是一件麻烦事。

另外一条思路其实也比较容易，以下。

1. 去除默认的预览图
2. 复制一份当前目标元素，cloneObj
3. 监听拖拽事件，改变cloneObj的位置
4. 拖拽结束移除cloneObj

下面均为伪代码，完整代码可在文章末尾查看

1. 去除默认的预览图

虽然setDragImage比较鸡肋，可是咱们能够设置一张透明的图片就能够实现去除默认的预览图的效果了

dragbox.addEventListener('dragstart', function (ev) {
    var img = new Image();
    img.src = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' %3E%3Cpath /%3E%3C/svg%3E";
    ev.dataTransfer.setDragImage(img, 0, 0);
}
复制代码

普通元素设置draggable="true"后，Chrome能够直接拖拽，FireFox须要在dragstart设置ev.dataTransfer.setData('text','任意值')才行

2.复制一份当前目标元素，cloneObj

复制一份当前目标元素，而且设置position:fixed等属性，能够悬浮在页面之上，而后添加到body，以下

var cloneObj = this.cloneNode(true);
cloneObj.style = 'position:fixed;left:0;top:0;z-index:999;pointer-events:none;transform:translate3d( ' + left + 'px ,' + top + 'px,0);'
document.body.appendChild(cloneObj);
复制代码

3.监听拖拽事件，改变cloneObj的位置

拖拽元素时会触发drag事件，和鼠标移动事件相似，能够取到当前鼠标位置（在拖拽过程当中并不触发mousemove事件），同时也能隐藏原目标

dragbox.addEventListener('drag', function (ev) {
    if(cloneObj){
        cloneObj.style.transform = 'translate3d( ' + left + 'px ,' + top + 'px,0)';
        dragbox.style.visibility = 'visible';
    }
})
复制代码

Chrome确实是这样，FireFox虽然也能触发drag事件，而后里面却取不到鼠标位置信息（均为0），因此，咱们只能把监听放在dragover上，虽然不太完美，也是一个方法

document.addEventListener('dragover', function (ev) {
    if(cloneObj){
        cloneObj.style.transform = 'translate3d( ' + left + 'px ,' + top + 'px,0)';    
    }
})
复制代码

4.拖拽结束移除cloneObj

拖拽结束移除cloneObj，而且还原原目标

oDiv.addEventListener('dragend', function (ev) {
    document.body.removeChild(cloneObj);
    cloneObj = null;
    dragbox.style.visibility = 'visible';
})
复制代码

draggable-polyfill

根据以上思路，完成了一个draggable-polyfill，这个polyfill的做用很简单，仅仅只是单纯的美化原生的拖拽，去除了原有的半透明预览图，不改变原有逻辑，只要项目中用到了原生拖拽，均可以打上这个补丁。

好比上面那个拖拽排序，引用这个polyfill之后，效果以下

项目地址 github.com/XboxYan/dra…

使用方式也很简单，直接引用就能够了

<script src="./lib/draggable-polyfill.js"></script>
复制代码

若是是工程化项目，也可使用npm安装

npm i draggable-polyfill
复制代码

而后直接导入用就能够了

import draggable-polyfill;
复制代码

更多示例可查看xboxyan.codelabo.cn/draggable-p…

须要注意的一点是：因为只是复制了当前节点，因此若是你的样式依赖于父级，那么复制出来的样式就会和原目标不同

.parent .dragbox{
    background:red
}
/*改成*/
.dragbox{
    background:red
}
复制代码

其余技巧

能够在网上随便找一个原生拖拽的案例，直接在控制台粘贴以上draggable-polyfill.js，就能够当即“试用”了，好比说这个例子，打开控制台粘贴而后回车再看看拖拽效果（以下）。