拖拽成功需同时满足：1. dragstart中调用dataTransfer.setData()设合法类型值；2. dragover和drop事件中均调用preventDefault()；3. 用CSS禁用user-select和滚动干扰；4. 移动端须降级为touch事件实现。
dragstart 事件里必须设置 dataTransfer 否则拖拽会失败
浏览器默认只允许图片、链接、选中文本被拖拽，其他元素（比如 常见错误是只设了 注意：这个 立即学习“Java免费学习笔记（深入）”； 拖拽过程中鼠标移动较快，容易触发浏览器默认的页面滚动（尤其在容器可滚动时），或在空白处拖出文本选中效果，影响体验。 解决方式不是靠 JS 拦截，而是用 CSS 主动关闭干扰行为： 注意： iOS Safari 和多数安卓 WebView 对 真实项目中，如果需要跨端拖拽，必须走降级方案： 最常被忽略的一点：即使在桌面端，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 根本不会触发：
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);
});
如何避免拖拽时意外触发页面滚动或文本选中？
user-select: none，防止拖拽时意外选中文本dragging { overflow: hidden }（需配合 JS 切换 class）或更稳妥地，在 dragstart 时临时禁用 body 滚动dragmove 中做重绘操作（没有原生 dragmove 事件！别被误导）dragmove 并非标准事件，不要监听它；位置追踪应通过 dragover 的 clientX/clientY 或结合 mousemove（需谨慎判断是否处于拖拽中）。移动端不支持原生
drag/drop API，别硬套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()。
