draggable="true"仅声明拖拽源资格，不自动实现拖拽功能；需手动绑定dragstart（设dataTransfer）、dragover（preventDefault）和drop事件，并注意移动端兼容性及视觉反馈。
draggable="true" 只是开关，不是功能本身
设了 draggable="true" 后元素光标变拖拽样式，但不会自动移动、不触发任何逻辑、也不传递数据——它只是告诉浏览器“这个元素可以成为 drag source”，后续所有行为都得靠手动配事件。
- 常见错误：加了属性就以为能拖着走，结果松手后元素原地不动 → 因为没监听
drop，也没更新位置 -
<input>、<textarea>、<select>这类表单控件硬加draggable="true"会被浏览器忽略，原生禁用拖拽 - 图片（
<img>）和链接（<a>）默认可拖拽，但为统一行为，建议显式写上draggable="true"
dragstart 必须设置 dataTransfer 数据
dragstart 是唯一能写入拖拽“内容”的时机，漏掉 e.dataTransfer.setData()，后面 drop 里拿到的全是空字符串。
- 类型必须用标准 MIME 类型，比如
"text/plain"；别用"Text"（IE 风格，不规范）或"string"（无效） - 值推荐用 ID 或序列化 JSON：
e.dataTransfer.setData("text/plain", JSON.stringify({ id: "field-1", type: "checkbox" })) - 不能传 DOM 节点对象，也不能传函数 ——
dataTransfer只支持字符串 - 顺手设
e.dataTransfer.effectAllowed = "move"或"copy"，控制鼠标光标样式
dragover 必须 preventDefault()，否则 drop 永远不触发
浏览器默认禁止在任意区域投放（防止误打开文件/导航），dragover 不调 e.preventDefault()，drop 就根本不会发生。
- 只在目标容器上监听
dragover并调preventDefault()，不是在拖拽源上 - 同时建议设
e.dataTransfer.dropEffect = "move"，和effectAllowed对应，提供视觉反馈 - 别在
dragenter或dragleave里做关键逻辑，它们只适合加/删高亮 class - 移动端（尤其 iOS Safari）原生
draggable基本不可靠，dragstart常不触发，得降级用touchstart/touchmove
drop 里怎么拿到坐标并放准位置
drop 事件里的坐标不是绝对位置，直接用 clientX/clientY 会受滚动条、缩放、iframe 影响，必须减去容器偏移。
立即学习“前端免费学习笔记（深入）”；
- 先获取容器位置：
const rect = container.getBoundingClientRect() - 再算落点：
const x = e.clientX - rect.left，const y = e.clientY - rect.top - 容器必须有
position: relative（或非static），否则left/top会相对整个文档定位 - 优先用
transform: translate(x, y)更新位置，避免 layout 触发；每次设新值前不用清旧值，直接覆盖即可 - 如果要插入 DOM（比如排序列表），用
event.target.closest('li')判断悬停项，再用insertBefore()实现“插到某项前”
拖拽过程中的视觉反馈和移动端兼容性，是上线前最容易被跳过的两个点。前者让用户知道“正在拖什么、能放哪”，后者决定 iOS 用户能不能用。
