draggable="true"仅启用原生拖放，不提供视觉反馈或辅助线；辅助线需JS手动实现，须基于画布坐标系计算并防抖处理，推荐6px阈值与requestAnimationFrame节流。
draggable="true" 本身不触发拖拽辅助线
HTML 的 draggable 全局属性只是告诉浏览器“这个元素可以被原生拖放”，它只影响 dragstart 是否能触发，**完全不控制视觉反馈、对齐逻辑或辅助线渲染**。低代码平台画布里的虚线、吸附偏移、网格对齐，全靠 JS 手动监听 dragover/dragenter + 计算 DOM 位置 + 动态插入/更新 <div> 辅助线元素实现。
辅助线计算必须基于画布容器坐标系，而非视口
常见错误是直接用 event.clientX/clientY 做判断——这会导致缩放、滚动、嵌套 iframe 场景下辅助线漂移。正确做法是：
- 用
canvasElement.getBoundingClientRect()获取画布左上角在视口中的绝对位置 - 将鼠标坐标减去该偏移，得到「相对于画布左上角」的坐标（即画布坐标系）
- 所有目标组件的
getBoundingClientRect()也需统一转换到同一坐标系再比对 - 若画布有
transform: scale(0.8)，还需用canvasElement.getTransform().inverse()（或手动除以缩放值）校正
水平/垂直辅助线触发阈值建议设为 4–8px，且需防抖
阈值太小（如 1px）导致辅助线频繁闪动；太大（如 20px）则吸附过松。实测 6px 是多数平台的平衡点。但更要紧的是加防抖：
- 不要在每次
dragover都重绘辅助线——用requestAnimationFrame节流 - 当鼠标连续移动时，仅在速度低于某个阈值（如 2px/frame）且距离目标边缘 ≤6px 时才激活辅助线
- 避免同时显示多条线干扰判断：同一方向只保留最近的一条（取
Math.min(...distances)）
示例关键逻辑：
let lastFrameTime = 0;<br>function onDragOver(e) {<br> if (performance.now() - lastFrameTime < 16) return;<br> lastFrameTime = performance.now();<br> const canvasRect = canvas.getBoundingClientRect();<br> const x = e.clientX - canvasRect.left;<br> const y = e.clientY - canvasRect.top;<br> updateGuides(x, y); // 实际计算和渲染辅助线<br>}
立即学习“前端免费学习笔记（深入）”；
辅助线 DOM 必须脱离画布内容流，且层级高于组件
把辅助线塞进画布容器内部、用 position: absolute 定位，极易被子组件的 overflow: hidden 或 z-index 截断。稳妥做法是：
- 辅助线元素挂载在
document.body下，用position: fixed - 通过
transform: translate()和left/top结合画布容器的getBoundingClientRect()动态定位 - 设置
z-index: 9999确保压住所有画布内元素 - 注意：若画布容器本身有
transform，fixed会相对视口而非容器，此时必须改用absolute并确保父容器position: relative
容易被忽略的是辅助线的 CSS 渲染性能：避免用 box-shadow 或渐变边框，纯 border: 1px dashed #007bff 最稳；动画用 transform 而非 top/left。
