设了draggable="true"但拖不动，根本原因是普通元素需手动绑定dragstart并调用setData()，且drop前必须在dragover中preventDefault()；移动端原生不支持。
设了 draggable="true" 但拖不动，基本是因为没写 dragstart 事件，或没在 dragover 里调 e.preventDefault()。
draggable="true" 只是开关，不是功能本身
它只告诉浏览器“这个元素允许被拖”，不触发任何默认行为，也不自动传数据。对 <div>、<span> 这类普通元素，必须手动绑定事件才能让拖拽真正工作。
-
draggable="false"能禁用图片、链接等原生可拖元素，但对<input>或<textarea>无效（浏览器强制禁用） - 空字符串
draggable等价于true，但建议显式写draggable="true"避免歧义 - 移动端完全不支持原生 drag/drop API，这点必须提前确认场景
dragstart 必须调用 dataTransfer.setData()
不设数据，拖拽会静默失败——Chrome、Firefox、Safari 全部如此。控制台通常不报错，但 drop 事件根本不会触发。
- 至少写一行：
e.dataTransfer.setData('text/plain', '')（空字符串也行） - 传业务数据时推荐自定义类型，比如
'text/id'或'application/json'，避免和系统内置类型冲突 - 别在
dragstart里漏掉e.dataTransfer.effectAllowed = 'move'，否则某些浏览器可能限制投放效果
drop 不触发？先查 dragover 是否 preventDefault()
drop 能否触发，完全取决于上一个 dragover 事件是否被阻止默认行为。没阻止，浏览器就当“此地禁止投放”，光标变禁止符号，drop 直接丢弃。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
- 只在目标容器上监听
dragover，并立刻调e.preventDefault()，不需要做别的 - 别在
dragenter里preventDefault()——它控制“能否进入”，不影响“能否投放” - 如果目标区域是动态生成的，记得给父容器委托监听，或确保事件绑定时机在元素挂载之后
drop 里取不到数据？检查 MIME 类型是否匹配
getData() 的参数必须和 setData() 时用的类型严格一致，大小写敏感，且不能依赖浏览器自动转换。
- 如果
setData('text/plain', 'abc')，就必须用getData('text/plain') - 用
'text/id'这类自定义类型更安全，避免被浏览器拦截或覆盖 - 调试时可打印
e.dataTransfer.types看实际有哪些类型可用
最容易被忽略的是：dragover 的 preventDefault() 必须在每次触发时都执行，不是只绑一次就行；另外，dataTransfer 对象只在拖拽生命周期内有效，drop 之后再访问会返回空或报错。
