draggable="true"仅启用拖拽入口，拖拽成功需手动绑定dragstart设置dataTransfer数据、阻止dropzone的dragover默认行为，并在drop中手动操作DOM；移动端不支持，dataTransfer仅传字符串且不保留DOM引用。
draggable 属性本身不触发拖拽行为，它只是告诉浏览器“这个元素允许被拖”，真正控制拖拽流程的是 Drag and Drop API 的事件监听和数据传递逻辑。漏掉 dragstart 里的 setData()，拖拽一定会失败。
为什么设置了 draggable="true" 却拖不动？
HTML 元素默认不可拖（draggable 默认为 false），但仅设 draggable="true" 只是“解禁”了拖拽入口，浏览器不会自动知道要传什么数据、拖到哪去。必须手动绑定事件并设置拖拽载荷。
-
draggable="true"是必要前提，但不是充分条件 - 必须监听
dragstart事件，并在其中调用event.dataTransfer.setData(format, data)，否则drop事件里拿不到有效数据 - 目标容器（
dropzone）需阻止dragover的默认行为，否则drop事件根本不会触发
dragstart 和 drop 之间发生了什么？
拖拽过程不是“直连”，而是通过 dataTransfer 对象中转数据，且只支持字符串格式。浏览器内部会缓存你设置的数据，在 drop 时再提供给目标元素读取。
-
event.dataTransfer.setData("text/plain", "item-123")是最常用写法；第二个参数必须是字符串，传对象会自动转成[object Object] - 若想传结构化数据，建议序列化：
setData("application/json", JSON.stringify({id: 1, type: "card"})) -
getData("text/plain")必须与setData的第一个参数完全匹配，大小写敏感，不匹配则返回空字符串 - 整个过程中，
dataTransfer不保留 DOM 引用，无法直接移动元素节点
如何让元素真正“移到”目标容器里？
Drag and Drop API 不负责 DOM 移动，它只提供事件钩子和数据通道。DOM 操作必须由你手动完成 —— 通常是在 drop 事件中调用 appendChild() 或 insertBefore()。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
立即学习“前端免费学习笔记（深入）”；
- 先在
dragstart中记录源元素：event.dataTransfer.setData("text/id", event.target.id) - 在
drop事件中获取 ID：const id = event.dataTransfer.getData("text/id")，再用document.getElementById(id)找到原元素 - 注意：如果源元素被移走后还想保留视觉反馈（如占位符），得额外处理，API 不提供自动占位机制
- 避免在
drop中直接removeChild()后又appendChild()，应优先用target.appendChild(source)—— 这会自动从原父节点移除
兼容性和容易忽略的细节
移动端默认不支持原生 Drag and Drop API，所有基于 draggable + 事件的方案在 iOS/Android 浏览器中基本无效。另外，dataTransfer.files 只在文件拖入时可用，普通元素拖拽进不来。
-
draggable在 Firefox 中对<img alt="如何在 HTML 中通过 draggable 属性结合 Drag and Drop API 实现元素拖拽" >和<a></a>默认为true，其他浏览器不一定，务必显式设置 -
dragend事件无法区分是成功 drop 还是中途取消，如需清理状态，得结合drop和dragleave综合判断 - 如果目标容器是空的，
dragover默认不触发，需确保它有尺寸（比如加min-height: 20px）或内容 - 不要依赖
dataTransfer.effectAllowed或dropEffect做核心逻辑，它们只是 UI 提示，可被用户绕过
真正难的不是监听几个事件，而是理解 dataTransfer 是个单向、字符串化、无状态的“信使”——它不帮你记上下文，也不替你操作 DOM。每一步移动都得自己算清楚从哪来、到哪去、怎么串起来。
