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

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

需求概述

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

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

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

拖拽方法总结

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

需求实现

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

• 不能将左侧面板的元素设置为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 的合成事件来重写。