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

时间: 2019-10-24阅读: 415标签: 拖拽

拖拽的实现

在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的作用很简单,仅仅只是单纯的美化原生的拖拽,去除了原有的半透明预览图,不改变原有逻辑,只要项目中用到了原生拖拽,都可以打上这个补丁。

项目地址 https://github.com/XboxYan/draggable-polyfill

使用方式也很简单,直接引用就可以了

<script src="./lib/draggable-polyfill.js"></script>

如果是工程化项目,也可以使用npm安装

npm i draggable-polyfill

然后直接导入用就可以了

import draggable-polyfill;

更多示例可查看http://xboxyan.codelabo.cn/draggable-polyfill/example/index.html

需要注意的一点是:由于只是复制了当前节点,所以如果你的样式依赖于父级,那么复制出来的样式就会和原目标不一样

.parent .dragbox{
    background:red
}
/*改为*/
.dragbox{
    background:red
}


其他技巧

可以在网上随便找一个原生拖拽的案例,直接在控制台粘贴以上draggable-polyfill.js,就可以立即“试用”了,比如说这个例子,打开控制台粘贴然后回车再看看拖拽效果(如下)。

drag

原文:https://segmentfault.com/a/1190000020842646

站长推荐

1.阿里云: 本站目前使用的是阿里云主机,安全/可靠/稳定。点击领取2000元代金券、了解最新阿里云产品的各种优惠活动点击进入

2.腾讯云: 提供云服务器、云数据库、云存储、视频与CDN、域名等服务。腾讯云各类产品的最新活动,优惠券领取点击进入

3.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/6174

js中drag拖拽

在没有drag事件的时候,做元素拖拽使用的都是mouse事件,但mouse在处理过程中可能有这样或那样的问题,主要还是感觉不流畅,如果小伙伴们不在考虑低版本IE(<IE9)的话,可以偿试一下drag,会有意想不到的收获。。

纯 JS 实现放大缩小拖拽采坑之旅

最近团队需要做一个智能客服悬浮窗功能,需要支持拖动、放大缩小等功能,因为这个是全局插件,为了兼容性考虑全部使用原生 JS 实现,不引用任何第三方库或者插件。开发过程中遇到的一些问题及解决方法

vue元素拖拽、移动

使用范围:两个元素位置交换,移动元素到指定位置,另外如需有需监听元素的拖拽情况,可调用对应的函数即可。如果不允许拖动到该元素区域内,可在dragover、dragenter中设置dropEffect:none;禁止拖拽。

JS 仿头条App频道编辑功能 (拖拽排序,添加,删减)

由于,项目中使用App混合开发,要实现频道编辑功能;在没找到合适的解决方案的情况下,自己写了这个库;已经在项目中跑了2年多,有不错的可用性;写下这篇文章分享下

实现元素拖拽的两种方式

为将要拖拽的元素设置允许拖拽,并赋予dragstart事件将其id转换成数据保存;为容器添加dragover属性添加事件阻止浏览器默认事件,允许元素放置,并赋予drop事件进行元素的放置。

Element ui表格组件+sortablejs实现行拖拽排序

运营小姐姐说想要可以直接拖拽排序的功能,原来在序号六的广告可能会因为金主爸爸加钱换到序号一的位置,拖拽操作就很方便;实现方式:template部分、script部分

实现平滑过渡的拖拽排序

最近重读Vue官方文档,在列表的排序过渡这一小节,文档提到,<transition-group> 组件有一个特殊的地方,不仅可以实现进入和离开动画,还可以改变定位,官网示例如下

ngDraggable.js_AngularJS之拖拽排序

ngDraggable.js是一款比较简单实用的angularJS拖拽插件,借助于封装好的一些自定义指令,能够快速的进行一些拖拽应用开发。首先先介绍一些基本的概念;ng-drop:是否允许放入拖拽元素

js实现本地图片文件拖拽效果

如何拖拽图片到指定位置,具体方法如下,在从本地上传图片的时候,如果使用拖拽效果,想想应该是更加的高大上,下面直接上js代码

原生js实现拖拽功能

如果要设置物体拖拽,必须使用三个事件,分别是:1、onmousedown:鼠标按下事件2、onmousemove:鼠标移动事件3、onmouseup:鼠标抬开事件

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!

文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯幽默笑话段子句子语录成语大全运营推广