HTML嵌套SVG如何实现与外部HTML的原生Drag and Drop交互

HTML原生支持Drag and Drop API，但SVG元素本身不支持该原生拖放能力，直接给SVG内部元素添加draggable="true"和拖放事件回调无法生效，如下方测试代码：

<svg xmlns="http://www.w3.org/2000/svg" version="2.0" viewBox="0 0 100 100">
  <rect x="10" y="10" width="80" height="80" fill="green" draggable="true" ondragstart="alert('test')" />
</svg>

在最新版Chrome浏览器中，上述代码既不会触发alert弹窗，也不会抛出对应的原生拖放事件。

已验证存在缺陷的方案 #

以下方案经过测试无法满足双向拖放需求，不建议使用：

• 仅监听mousedown/mousemove/mouseup事件手写模拟拖拽逻辑：仅能实现SVG内部的拖拽效果，页面内其他HTML元素只识别dragstart/dragend等原生拖放事件，无法响应这类自定义模拟的拖拽动作，无法实现跨元素双向交互。
• 手动构造原生拖放事件触发：受浏览器安全机制限制，手动实例化的DataTransfer对象会被强制置空，不具备合法事件效力，无法被原生拖放逻辑识别。
• 点击SVG元素时动态生成dummy HTML元素承接点击动作、触发原生dragstart：存在事件时序问题，触发逻辑不稳定，无法全场景稳定生效。

可落地实现方案 #

方案1：预生成透明代理元素（兼容原生Drag and Drop API） #

该方案不存在时序问题，核心是避免点击后动态生成代理元素，提前完成代理元素布局：

1. 给SVG外层套一个相对定位的HTML父容器，针对每个可拖拽的SVG元素，提前生成一个和元素尺寸、位置完全重合的绝对定位透明<div>，设置draggable="true"作为拖放代理。
2. 监听代理div的原生dragstart事件，将对应SVG元素的业务数据写入dataTransfer，同时给代理元素添加标记，标识当前拖拽对应的SVG元素。
3. 页面外部HTML元素的原生拖放监听逻辑无需任何修改，即可正常接收拖拽事件。
4. 实现外部HTML元素向SVG的反向拖拽时，直接给SVG外层的HTML父容器绑定原生dragover/drop事件，将落点坐标转换为SVG视口坐标后，触发SVG内部的放置逻辑即可。

注意：SVG发生缩放、平移操作时，需要同步更新代理div的位置和尺寸，避免点击错位。该方案完全复用原生拖放API，无需引入第三方依赖，兼容性与原生API完全一致。

方案2：全局统一拖拽状态层（替代原生Drag and Drop API） #

如果不想维护代理元素的位置同步逻辑，可以放弃原生拖放API，采用全页面统一的自定义拖拽层实现，这也是当前主流可视化类库的通用落地方案：

1. 全页面所有拖拽交互（包含普通HTML元素、SVG元素）统一使用全局mousedown/mousemove/mouseup事件监听实现，不要混用原生拖放API和自定义拖拽逻辑。
2. 拖拽触发时，在页面最顶层生成跟随鼠标移动的拖拽预览元素，同时在全局维护当前拖拽源的状态对象，存储拖拽数据、类型等信息。
3. 鼠标移动过程中，实时计算鼠标当前悬浮的元素，判断是否为合法放置目标，同步添加对应的高亮交互样式。
4. 鼠标抬起时，若当前悬浮位置为合法放置目标，则执行对应放置回调，清空全局拖拽状态、移除拖拽预览元素。
   该方案不存在原生API的元素兼容性问题，可完全自定义拖拽样式与交互逻辑，边界场景（如滚动容器自动滚动、触摸设备适配、跨iframe拖拽）无需自行实现，可直接使用成熟开源库完成能力接入，开发成本更低。

内容的提问来源于stack exchange，提问作者BoA456