原生拖放需显式设置draggable="true"且dragover中调用preventDefault；dataTransfer传数据而非移动DOM；移动端不支持，须用touch事件或兼容库替代。
拖放事件监听必须在目标元素上显式设置 draggable="true"
HTML 元素默认不可拖，即使绑了 dragstart 也触发不了。必须手动加属性：<div draggable="true">拖我</div>。注意：仅 <img> 和 <a> 默认可拖，其他所有元素（包括 <div>、<span>、<li>）都得显式声明。常见错误是只写 JS 监听，忘了这个 HTML 属性，结果全程没反应。
dragover 事件里必须调用 event.preventDefault()
这是最常踩的坑——目标容器（drop zone）不响应 drop，往往是因为漏了这句。浏览器默认会阻止非链接/非图片元素的拖放行为，dragover 是唯一能“告诉浏览器：这里允许放下”的时机。不写 event.preventDefault()，drop 根本不会触发，连控制台都不会报错。
- 只在需要接受投放的元素上监听
dragover，并立即preventDefault - 不要在
dragenter或dragleave里做这事，它们不决定是否可投放 - 如果要高亮提示区域，可在
dragenter加 class，dragleave移除，但dragover必须存在且调用preventDefault
用 dataTransfer.setData() 传数据，别依赖 DOM 移动
原生拖放不会自动移动节点；drop 触发时，你拿到的是一个 dataTransfer 对象，里面存着你在 dragstart 里塞进去的数据。常见误区是以为拖完元素就“到了”，其实只是触发了事件，DOM 还在原处。
-
event.dataTransfer.setData('text/plain', 'item-123')是最常用方式，类型建议用'text/plain'或'text/uri-list'，避免用自定义 MIME 类型导致兼容问题 - 不要在
drop里直接appendChild拖拽源节点——它可能还在别的地方被引用，或已脱离文档流 - 推荐做法：在
dragstart存 ID 或序列化数据，在drop中根据 ID 找到对应元素，再用 JS 移动（如insertBefore或append）
移动端不支持原生 drag 系列事件
iOS Safari 和大多数安卓 WebView 完全忽略 draggable="true" 和所有 drag* 事件。这不是 bug，是规范明确不保证支持。想在手机上实现拖放，必须换方案：
立即学习“Java免费学习笔记（深入）”；
- 用
touchstart/touchmove/touchend+ CSStransform模拟拖动视觉效果 - 借助库如
interact.js或sortablejs（它们内部做了平台判断和降级） - 若只针对现代桌面端，可放心用原生 API；但只要需求含移动端，就得提前规划替代路径
很多项目上线后才发现 iOS 上拖不动，问题就出在这里——原生拖放不是跨端可靠的交互机制。
