draggable="true"仅标记拖拽起点且不自动生效，必须配合dragstart事件、setdata()调用、dragover.preventdefault()及drop事件处理才能实现完整拖放功能。
draggable 属性本身不实现拖拽逻辑，只控制浏览器是否派发 drag 事件链；设了 draggable="true" 但没配事件、没调 preventDefault()、没传 dataTransfer，等于白设。
为什么加了 draggable="true" 却拖不动或 drop 不触发
常见错误现象：光标变拖拽样式，但按住拖动无反应；松手后目标区域没变化；drop 事件监听器完全不执行。
-
draggable="true"必须作为 HTML 属性显式写入标签，element.draggable = true或element.setAttribute('draggable', 'true')动态设置无效 - 元素必须有尺寸（
width/height、padding或内容撑开），否则浏览器判定“不可交互”，dragstart根本不派发 -
<input>、<textarea></textarea>、<select></select>等表单控件硬加该属性会被浏览器忽略——需用外层容器代理并设draggable="true" - 样式拦截：
user-select: none或pointer-events: none会直接阻断鼠标按下阶段，连光标都不变
dragover 中必须同步调用 preventDefault() 才能 drop
这是最常卡住开发者的硬性条件：浏览器默认禁止在非链接/表单元素上投放，dragover 是唯一能解除该限制的事件，且 preventDefault() 必须在回调内**立即执行**。
- 放在
setTimeout、Promise.then或异步函数里就失效 - 只监听
drop没用，dragover回调必须存在，且第一行就得是e.preventDefault() - 目标容器若为空
<div id="dropzone"></div>，记得加min-height或padding，否则无法命中 - 如果需要高亮反馈，用
dragenter加 class、dragleave移 class，别在dragover里反复操作 DOM
dataTransfer 数据传递的兼容性陷阱
dataTransfer.getData() 在 Firefox 和跨 iframe 场景下大概率返回空字符串，不是代码写错了，而是浏览器安全策略限制。
-
setData()的 MIME 类型必须严格匹配：'text/plain'最稳；'Text'、'mydata'、'application/json'在部分浏览器中静默失败 - 哪怕只传 ID，也得显式写：
e.dataTransfer.setData('text/plain', e.target.id)；传空字符串也要写setData('text/plain', '')，否则整个链路在起点中断 - 结构化数据建议先
JSON.stringify()再塞进'text/plain'，避免自定义类型兼容问题 - 更稳妥的做法是用
WeakMap存源信息：dragState.set(e.dataTransfer, { id: element.dataset.id })，drop 时直接取，不受跨域/iframe 影响
移动端和低代码画布里的特殊处理
iOS Safari 和 Android Chrome 基本不触发原生 dragstart/drop，这不是 bug，是平台级缺失；低代码画布中的辅助线、吸附、缩放适配，全靠 JS 手动实现，draggable 属性只负责“让 drag 事件能发出来”。
- 辅助线计算必须基于画布容器坐标系，不能直接用
clientX/clientY—— 要减去canvas.getBoundingClientRect().left/top - 若画布有
transform: scale(0.8)，还得手动除以缩放值校正坐标 - 辅助线触发阈值建议 4–8px，实测 6px 平衡吸附精度与防抖效果；必须用
requestAnimationFrame节流，避免频繁重绘 - 辅助线 DOM 应挂载在
document.body下，用position: fixed+transform: translate()定位，避免被子组件的overflow: hidden截断
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
