从GGEditor的一个案例看JS原生拖拽功能

PingCAP 发布于2019-08-02 15:22 / 3734人阅读

摘要：涉及部分的，不会对理解全局产生干扰。在上监听事件，当为画布时，通过创建一个蓝色虚线框移动的时候，更新的位置在上监听事件，落在画布时，创建一个的节点从而完成整个拖拽添加元素的功能。

拖拽操作平时用的比较少，在最近的一个项目中使用到了，并且踩了一些坑，本文做一个简单的总结。涉及部分G6的API，不会对理解全局产生干扰。

需求概述

如下图所示，左侧为GGEditor元素面板React组件，右侧为G6画布，现需要将元素从「元素面板」中拖拽到「画布」上。要求：

拖拽时蓝色虚线框和元素面板的对应元素尺寸相同（为一矩形）

蓝色虚线框跟随鼠标移动，指明当前拖拽的位置

元素面板上对应元素不应发生改变

_{⚠️图中的黑色圆圈仅为录屏软件指明鼠标操作提示}

拖拽方法总结

相较于大部分DOM操作只需要监听某一种事件，原生拖拽功能的实现通常需要监听全部或部分的下述事件：

事件	event.target	触发时机
drag	被拖动元素	拖拽中（每几百毫秒触发一次）
dragstart	被拖动元素	刚开始拖拽
dragend	被拖动元素	拖拽结束（鼠标释放或esc）
dragover	被拖动元素下方元素	拖拽到某一目标上时（每几百毫秒一次）
dragenter	被拖动元素下方元素	被拖动元素进入可释放处时
dragleave	被拖动元素下方元素	拖拽离开某一目标时
drop	被拖动元素下方元素	同dragend 且在其之前触发

需求实现

实现之前，有几个踩坑点先说明：

不能将左侧面板的元素设置为draggable，因为原生拖拽自带阴影效果，如下图。

很明显这不是我们要的效果。

拖拽时的蓝色虚线框应该由G6绘制成一个canvas的元素，因为画布可以放大或缩小，这个虚线框应和实际放在画布上的元素尺寸相同而不是左侧面板的元素尺寸相同。（不了解G6的同学自行忽略）

思路

拖拽开始或鼠标落下时，创建一个和元素大小宽高相同的透明度为0的矩形shadowShape，并监听其drag，mouseup事件。

在document上监听dragenter事件，当target为画布时，通过G6api创建一个蓝色虚线框dragShape

shadowShape移动的时候，更新dragShape的位置

在document上监听drop事件，落在画布时，创建一个G6的节点从而完成整个拖拽添加元素的功能。

⚠️踩坑点：必须要阻止dragover的默认行为，保证drop的正常触发，参考这则问答

总结

1 相较于上个版本的GGEditor，实现了拖拽功能的连续性。之前，鼠标即使保持按下，一旦移出画布，就终止了本次的拖拽过程。

_{上个版本的GGEditor}

2 待优化点：

由于蓝色虚线框是G6画布上的元素，能够根据G6的缩放比例自动调整大小，所以在其他地方的拖拽过程不易做出类似的虚线框，体验上有间断感

当前代码在一个react组件里操作了大量的原生事件监听，不够React，考虑之后直接开发一个新的组件，使用React的合成事件来重写。

云服务器 GPU云服务器原生js实现拖拽 js从最后一个输出从哪里看快删除的域名阿里云的服务器密码从哪里看

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/54079.html

从GGEditor的一个案例看JS原生拖拽功能

摘要：涉及部分的，不会对理解全局产生干扰。在上监听事件，当为画布时，通过创建一个蓝色虚线框移动的时候，更新的位置在上监听事件，落在画布时，创建一个的节点从而完成整个拖拽添加元素的功能。 showImg(https://segmentfault.com/img/remote/1460000019564977);showImg(https://segmentfault.com/img/remot...

taowen 2019-08-23 18:16 评论0 收藏0
百度网盘文件夹框选功能

摘要：案例说明使用原生完成桌面操作级应用，对于原生的掌握情况而言，是一个较为全面的综合型案例。本次课从事件相关的功能入手，给大家带来详细的分享。 showImg(https://segmentfault.com/img/bVbh1qw); 案例说明：使用原生 JS 完成桌面操作级应用，对于原生 JS 的掌握情况而言，是一个较为全面的综合型案例。本次课从事件（event）相关的功能入手，给大家...

jkyin 2019-08-29 16:55 评论0 收藏0
JS进阶篇4---原生JS实现对元素的拖拽

摘要：原生实现对元素的拖拽一背景介绍此处为铺垫内容，可跳过随着前端的不断发展，各种各样的前端规范和新知识新技术层出不穷，极大地拓展了开发者的操作空间，也大大地提升了用户体验。原生 JS 实现对 html 元素的拖拽一、背景介绍【此处为铺垫内容，可跳过】随着 Web 前端的不断发展，各种各样的前端规范和新知识、新技术层出不穷，极大地拓展了开发者的操作空间，也大大地提升了用户体验。而随着...

evin2016 2019-08-02 15:24 评论0 收藏0
JS进阶篇4---原生JS实现对元素的拖拽

摘要：原生实现对元素的拖拽一背景介绍此处为铺垫内容，可跳过随着前端的不断发展，各种各样的前端规范和新知识新技术层出不穷，极大地拓展了开发者的操作空间，也大大地提升了用户体验。原生 JS 实现对 html 元素的拖拽一、背景介绍【此处为铺垫内容，可跳过】随着 Web 前端的不断发展，各种各样的前端规范和新知识、新技术层出不穷，极大地拓展了开发者的操作空间，也大大地提升了用户体验。而随着...

phoenixsky 2019-08-23 18:22 评论0 收藏0