HTML5 drag/drop 无法实现拖拽连线，因其缺乏拖动中实时坐标获取与路径绘制能力；必须改用 mousedown/mousemove/mouseup + SVG/canvas 手动实现。
原生 HTML5 的 dragstart/drop 机制不支持“连线”这种视觉路径绘制，它只管元素移动和数据传递。要做拖拽连线（比如流程图节点间画线），必须脱离纯 drag/drop，改用 mousedown/mousemove/mouseup 手动捕获坐标 + SVG 或 canvas 绘制连接线。
为什么不能直接用 HTML5 drag/drop 做连线
HTML5 拖放事件链中没有提供“拖动过程中实时获取鼠标与两个元素相对位置”的接口。dragover 只告诉你“某个可拖元素进入了目标区域”，但无法知道它此刻离起点多远、是否悬停在两个节点之间、更没法拿到连续的坐标流来画线。
常见错误现象包括：
- 试图在
drag事件里调用e.clientX/e.clientY—— 实际上该事件在多数浏览器中被禁用或始终返回 0 - 在
ondrop里才去连两点 —— 这只能画出“结果线”，不是“拖拽过程中的动态连线” - 误以为
dataTransfer.setDragImage()能画线 —— 它只能设置拖拽时显示的图片，且兼容性差（Safari 不支持自定义图像）
用 mousemove + SVG 实现拖拽连线的核心步骤
关键不是“拖拽什么”，而是“监听鼠标在哪、起点在哪、终点在哪”。典型流程是：点击一个节点 → 按住不放 → 移动鼠标 → 动态更新 SVG 线段的 x2/y2 → 松开时决定是否创建正式连接。
立即学习“前端免费学习笔记（深入）”；
实操建议：
- 每个可连线节点加
id并绑定mousedown，记录其 DOM 元素和getBoundingClientRect()中心坐标作为起点 - 全局监听
document.mousemove，用event.clientX/event.clientY获取实时鼠标位置 - 用
<svg>叠在页面顶层，动态创建或更新<line>的x1/y1/x2/y2 - 松开时（
mouseup），检查鼠标是否落在另一个节点内（用elementFromPoint()或手动计算距离），再决定是否生成持久化连接
示例片段（简化）：
let line, startX, startY;
nodeA.addEventListener('mousedown', e => {
const rect = nodeA.getBoundingClientRect();
startX = rect.left + rect.width / 2;
startY = rect.top + rect.height / 2;
line = document.querySelector('#connection-line');
line.setAttribute('x1', startX);
line.setAttribute('y1', startY);
});
document.addEventListener('mousemove', e => {
if (line) {
line.setAttribute('x2', e.clientX);
line.setAttribute('y2', e.clientY);
}
});
document.addEventListener('mouseup', () => {
if (line) {
// 判断 e.clientX/e.clientY 是否靠近 nodeB...
line = null;
}
});
连线状态管理容易被忽略的三个点
真实项目里，连线不是一次性动作，而是一组有状态的关系：
- 临时线（拖拽中）和正式线（已确认）要区分渲染样式，比如虚线 vs 实线、透明度不同
- 多个节点可能共用同一 SVG 容器，每次更新
<line>前必须清空旧的临时线，否则会残留 - 移动端需额外处理
touchstart/touchmove/touchend，且elementFromPoint()在 iOS Safari 中对 touch 坐标支持不稳定，建议统一转为pointer events
最常被跳过的细节是：没做 mouseleave 清理。当鼠标快速移出窗口再移回，mousemove 仍会触发，但起点可能已失效 —— 必须在 mouseleave 或 blur 时重置所有临时状态。
