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

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

需求概述

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

• 拖拽时蓝色虚线框和元素面板的对应元素尺寸相同（为一矩形）
• 蓝色虚线框跟随鼠标移动，指明当前拖拽的位置
• 元素面板上对应元素不应发生改变

  

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

拖拽方法总结

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

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

需求实现

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

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

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

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

思路

1. 拖拽开始或鼠标落下时，创建一个和元素大小宽高相同的透明度为0的矩形shadowShape，并监听其drag，mouseup事件。
2. 在document上监听dragenter事件，当target为画布时，通过G6api创建一个蓝色虚线框dragShape
3. shadowShape移动的时候，更新dragShape的位置
4. 在document上监听drop事件，落在画布时，创建一个G6的节点从而完成整个拖拽添加元素的功能。
5. ⚠️踩坑点：必须要阻止dragover的默认行为，保证drop的正常触发，参考这则问答

总结

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

_{上个版本的GGEditor}

2 待优化点：

• 由于蓝色虚线框是G6画布上的元素，能够根据G6的缩放比例自动调整大小，所以在其他地方的拖拽过程不易做出类似的虚线框，体验上有间断感
• 当前代码在一个react组件里操作了大量的原生事件监听，不够React，考虑之后直接开发一个新的组件，使用React的合成事件来重写。