拖拽成功需同时满足：1. dragstart中调用dataTransfer.setData()设合法类型值；2. dragover和drop事件中均调用preventDefault()；3. 用CSS禁用user-select和滚动干扰；4. 移动端须降级为touch事件实现。
dragstart 事件里必须设置 dataTransfer 否则拖拽会失败
浏览器默认只允许图片、链接、选中文本被拖拽，其他元素（比如 <div>）触发 dragstart 后若不主动写入数据，整个拖拽流程会在鼠标抬起时静默中断——看起来“能拖但放不下去”。关键不是加 draggable="true"，而是必须在 dragstart 中调用 event.dataTransfer.setData()。
常见错误是只设了 draggable="true" 却忘了 setData，或者传了空字符串、非法类型（如直接传对象）：
element.addEventListener('dragstart', (e) => {
// ❌ 错误：没 setData，拖拽无效
// ✅ 正确：至少设一个合法 MIME 类型 + 字符串值
e.dataTransfer.setData('text/plain', 'item-id-123');
// 可选：设置拖拽时的视觉反馈（如半透明）
e.target.style.opacity = '0.5';
});
drop 事件默认被阻止，必须显式调用 preventDefault()
drop 事件本身不会自动触发，因为浏览器对非链接/非文件的 drop 操作做了默认拦截。哪怕你监听了 drop，不调 e.preventDefault()，事件就根本不会进入你的回调函数——控制台也看不到报错，只会“毫无反应”。
注意：这个 preventDefault() 必须在 dragover 事件中也调用，否则 drop 根本不会触发：
立即学习“Java免费学习笔记（深入）”；
-
dragover是“允许放置”的信号，必须阻止默认行为才能让drop可用 -
drop是“实际放置”的时机，同样要preventDefault()防止浏览器执行默认跳转或打开行为 - 两者缺一不可，顺序不能颠倒
target.addEventListener('dragover', (e) => {
e.preventDefault(); // ⚠️ 必须有！否则 drop 不会触发
});
target.addEventListener('drop', (e) => {
e.preventDefault(); // ⚠️ 也必须有！否则可能跳转或下载
const id = e.dataTransfer.getData('text/plain');
console.log('拖入元素 ID:', id);
});
如何避免拖拽时意外触发页面滚动或文本选中？
拖拽过程中鼠标移动较快，容易触发浏览器默认的页面滚动（尤其在容器可滚动时），或在空白处拖出文本选中效果，影响体验。
解决方式不是靠 JS 拦截，而是用 CSS 主动关闭干扰行为：
- 给被拖拽元素加
user-select: none，防止拖拽时意外选中文本 - 给目标区域或 body 加
dragging { overflow: hidden }（需配合 JS 切换 class）或更稳妥地，在dragstart时临时禁用 body 滚动 - 避免在
dragmove中做重绘操作（没有原生dragmove事件！别被误导）
注意：dragmove 并非标准事件，不要监听它；位置追踪应通过 dragover 的 clientX/clientY 或结合 mousemove（需谨慎判断是否处于拖拽中）。
移动端不支持原生 drag/drop API，别硬套
iOS Safari 和多数安卓 WebView 对 draggable 属性和 dataTransfer 支持极差，甚至完全忽略。试图在移动端用同一套逻辑，大概率表现为：能长按但无法拖动、dragstart 不触发、drop 完全无响应。
真实项目中，如果需要跨端拖拽，必须走降级方案：
- 检测
'draggable' in document.createElement('span')或监听dragstart是否可绑定 - 移动端改用
touchstart → touchmove → touchend手动实现位移 + 碰撞检测 - 使用成熟库如
interact.js或sortablejs（它们内部已处理平台差异）
最常被忽略的一点：即使在桌面端，dataTransfer.items 和 dataTransfer.files 在不同浏览器中行为也不一致，涉及文件拖拽时务必用 getData('text/plain') 这类明确类型兜底，别依赖 items[0].getAsString()。
