draggable设了没反应是因为普通元素需手动监听dragstart并调用setData()，drop事件依赖dragover中preventDefault()，且移动端完全不支持原生拖拽。
draggable 属性为什么设了没反应
默认只有 <img> 和 <a> 元素原生支持拖拽，其他元素即使加了 draggable="true" 也不会触发拖拽行为——浏览器根本不监听它们的拖拽事件。
- 必须手动监听
dragstart事件，并在其中调用event.dataTransfer.setData()，否则拖拽会静默失败 -
draggable="false"可以禁用原生可拖元素（比如防止图片被误拖） - 对
<div>、<span>等普通元素，draggable="true"仅是开启“可拖状态”，不提供任何默认视觉反馈或逻辑
dragstart 里不写 setData 就拖不动
这是最常卡住的地方：光有 draggable="true" 和 dragstart 监听还不够，dataTransfer 对象必须至少设置一个数据项，否则拖拽操作会被浏览器中止。
- 哪怕只是占位，也得写
event.dataTransfer.setData('text/plain', '') - 如果想传自定义数据（比如 ID），推荐用
'text/id'这类自定义 MIME 类型，避免和系统行为冲突 - 不设
setData时，控制台通常无报错，但drop事件根本不会触发——这点特别容易漏查
element.addEventListener('dragstart', (e) => {
e.dataTransfer.setData('text/plain', 'item-123'); // 必须有这一行
});
drop 事件收不到？检查 dragover 是否被阻止
drop 事件能否触发，完全取决于前一个 dragover 事件是否被显式阻止默认行为。没阻止，就等于告诉浏览器：“这里不允许投放”，drop 直接被忽略。
- 只需在目标区域监听
dragover并调用e.preventDefault()即可，不需要做别的 - 别在
dragenter里阻止，默认行为允许进入，但不允投放；真正起作用的是dragover - 如果目标是 iframe 或跨域内容，
drop会失效，这是浏览器安全限制，无法绕过
dropZone.addEventListener('dragover', (e) => {
e.preventDefault(); // 关键：没有这句，drop 永远不会来
});
dropZone.addEventListener('drop', (e) => {
e.preventDefault();
console.log(e.dataTransfer.getData('text/plain'));
});
移动端不支持原生 draggable，别硬套
所有主流移动浏览器（包括 Chrome for Android、Safari on iOS）都不支持 draggable 属性和相关事件。这不是 bug，是规范明确不强制要求实现。
立即学习“前端免费学习笔记（深入）”；
- 试图在手机上调试拖拽逻辑，大概率发现
dragstart根本不触发 - 需要兼容移动端时，必须换方案：用
touchstart/touchmove+ CSStransform模拟，或引入interact.js这类库 - 不要依赖
draggable做核心交互逻辑，尤其当产品需覆盖 App 内嵌 WebView 场景
