draggable属性仅启用拖放起点，不实现拖拽行为；真正依赖dragstart等7个事件和datatransfer对象；必须拦截dragover并preventdefault才能触发drop。
draggable 属性本身不实现拖拽，只是开启拖放起点
draggable 是一个布尔全局属性，设为 true 才允许元素被鼠标选中后触发原生拖放流程。但它完全不控制拖拽行为——没有它，dragstart 根本不会触发；有了它，也不代表能自动“拖到某处并放下”。真正干活的是拖放 API 的 7 个事件和 dataTransfer 对象。
常见错误现象：draggable="true" 加了但拖不动，或拖到目标区松手没反应——大概率是没监听 dragover（必须阻止默认行为）或没实现 drop 处理逻辑。
-
draggable只对鼠标操作生效，触摸设备需额外处理（如用touchstart模拟） - 默认可拖拽的元素（如
<img>、<a></a>）即使没写draggable也能拖，但自定义元素（如<div>）必须显式设 <code>draggable="true" - 设
draggable="false"可禁用原生拖拽（例如防止图片被误拖出页面）
必须拦截 dragover 才能让 drop 事件触发
这是最常踩的坑：很多教程只写了 dragstart 和 drop，结果松手时什么都没发生。因为浏览器默认会阻止 drop，除非目标元素在 dragover 阶段明确说“我接受投放”。
正确做法是在目标容器上监听 dragover，并立刻调用 event.preventDefault()：
target.addEventListener('dragover', (e) => {
e.preventDefault(); // 关键！否则 drop 不会触发
});
- 仅
preventDefault()就够了，不需要返回false或其他操作 - 如果还希望显示拖拽反馈（比如高亮边框），可在
dragenter和dragleave中增删 class -
dragover会高频触发（类似mousemove），避免在里面做重计算
dataTransfer 是唯一跨元素传数据的通道
拖拽过程中，只有 dataTransfer 对象能在源元素和目标元素之间传递信息。它不是普通对象，不能直接赋值属性，必须用 setData() / getData() 方法。
典型用法：
// 拖拽源
element.addEventListener('dragstart', (e) => {
e.dataTransfer.setData('text/plain', 'item-123');
e.dataTransfer.setData('application/json', JSON.stringify({ id: 123 }));
});
// 投放目标
target.addEventListener('drop', (e) => {
e.preventDefault();
const id = e.dataTransfer.getData('text/plain'); // 必须用相同 MIME 类型取
});
- MIME 类型要配对，
'text/plain'最通用，'text/uri-list'适合链接，自定义类型如'application/x-myapp'也行 - 不能传 DOM 节点、函数或复杂对象，只能传字符串（JSON 序列化后算一种妥协）
- 移动端 Safari 对
dataTransfer支持有限，部分类型可能为空，建议降级用dataset配合 touch 事件模拟
drop 事件里不调用 preventDefault 就算白监听
和 dragover 类似，drop 事件也有默认行为：对链接是跳转，对文件是下载，对文本是插入光标位置。如果你要做自定义逻辑（比如移动列表项），就必须阻止它。
- 漏掉
e.preventDefault()→ 页面可能跳转、刷新，或触发浏览器默认插入行为 - 如果同时监听了
dragend，注意它在drop后触发，且无法获知是否成功投放（drop才是最终确认点） - 想支持多文件拖入？
dataTransfer.files只在drop里可用，且需用户确实拖了文件进来
draggable，而在于那几个必须 preventDefault() 的事件节点——少一个，整个链路就断。真实项目里还要考虑键盘辅助（Enter 触发投放）、焦点管理、无障碍属性（aria-dropeffect、aria-grabbed）这些，但原生拖放 API 的骨架就这三件事：标记可拖、允许投放、接收数据。
