原生拖放需正确处理dragstart/dragover/drop事件：dragstart必须setData，dragover必须同步preventDefault，IE11仅支持text类型且files为空，移动端无原生支持。
拖放功能必须用 dragstart / dragover / drop 这套原生事件
现代浏览器都支持 HTML5 原生拖放 API，但行为差异集中在 dragover 默认被阻止（不调用 preventDefault() 就无法触发 drop），以及 IE 11 对 DataTransfer 的限制。Chrome/Firefox/Safari/Edge（Chromium 内核）基本一致，IE 11 是唯一需要单独处理的旧环境。
关键点：
-
dragstart中必须设置event.dataTransfer.setData()，否则 Chrome 和 Safari 会静默忽略拖拽 -
dragover必须同步调用event.preventDefault()，且不能是异步回调里调用（比如setTimeout里不行） - IE 11 不支持
setData('text/plain', ...)以外的类型，setData('text/html', ...)会失败 - Firefox 默认禁止跨域图片拖拽，需在
img上加draggable="true"显式开启
drop 事件里读不到 dataTransfer.files？检查是否漏了 dragover 阻止默认
这是最常见卡点：明明绑了 drop，但 event.dataTransfer.files 总是空数组，或 getData() 返回空字符串。根本原因几乎全是 dragover 没正确阻止默认行为。
实操建议：
立即学习“Java免费学习笔记（深入）”；
- 确保
dragover监听器是直接绑定在目标元素上，而不是靠冒泡捕获（某些框架封装后容易丢失） - 不要写成
element.addEventListener('dragover', e => { e.preventDefault(); }, { passive: false })——passive: false在这里无效，preventDefault()是否生效只取决于函数体内是否调用，和 passive 无关 - 调试时在
dragover里打个console.log('dragover')，如果没输出，说明事件根本没触发，要检查目标元素是否设置了height/width（空 div 默认尺寸为 0，无法触发）
需要兼容 IE 11？绕过 DataTransfer，改用自定义属性 + dragstart 记录状态
IE 11 的 DataTransfer 只允许读写 'text' 类型，且 files 属性始终为空。若必须支持，只能放弃原生文件拖放，退化为「视觉拖拽 + 点击触发」混合方案。
可行路径：
- 在
dragstart中给被拖元素加临时data-drag-id，并缓存对应数据到全局 Map 或数组 -
drop触发时，从事件target向上查找带data-drag-id的祖先，再查 Map 取出原始数据 - 对文件类操作，降级为点击后弹出
，用label包裹模拟拖放区域 - 完全避开 IE 的
dataTransfer.items和files，它们在 IE 下不可靠
document.addEventListener('dragstart', e => {
const id = 'item_' + Date.now();
e.target.dataset.dragId = id;
dragCache.set(id, { type: 'card', data: { id: 123 } });
});
document.addEventListener('drop', e => {
e.preventDefault();
const el = e.target.closest('[data-drag-id]');
if (el && dragCache.has(el.dataset.dragId)) {
const data = dragCache.get(el.dataset.dragId);
// 处理拖入逻辑
}
});
移动端没有原生拖放，别试图用 touchstart 模拟整套逻辑
iOS Safari 和 Android Chrome 均不触发 dragstart/drop，所有基于 touch 的“拖放”都是 JavaScript 手动实现位置计算 + CSS transform，和原生 API 完全无关。强行监听 touchstart 并调用 event.dataTransfer.setData() 会静默失败。
务实做法：
- 用
if ('ontouchstart' in window)检测，直接禁用原生拖放样式（如draggable="false"） - 对列表排序类场景，改用
react-dnd或sortablejs这类已封装好移动端适配的库 - 避免在
touchmove中频繁修改transform，应使用requestAnimationFrame节流 - 不要依赖
dataTransfer.effectAllowed或dropEffect，移动端无意义
dragover 的时机约束、IE 的 DataTransfer 残缺、以及移动端彻底缺席——这三处不提前踩坑，上线后定位问题会非常耗时。 
