dragstart中必须调用setdata()否则拖放失败；drop和dragover都需preventdefault()；推荐用datatransfer.items读文件；避免依赖dragleave；移动端safari需模拟拖放。
dragstart 事件里必须设置 dataTransfer 否则拖放会失败
浏览器默认只允许图片、链接、选中文本被拖动，其他元素（比如 <div>）要拖动，必须在 <code>dragstart 中调用 event.dataTransfer.setData()。不设就静默失败——连 dragover 都不会触发。
常见错误是只写了 event.preventDefault() 却漏掉 setData：
element.addEventListener('dragstart', (e) => {
// ❌ 错误：没设置 dataTransfer，拖不动
e.dataTransfer.effectAllowed = 'move';
});
element.addEventListener('dragstart', (e) => {
// ✅ 正确：至少设一个 type，值可以是任意字符串
e.dataTransfer.setData('text/plain', 'item-123');
e.dataTransfer.effectAllowed = 'move';
});
-
setData(type, data)的type推荐用'text/plain'或'text/uri-list'，自定义类型（如'application/my-item'）在跨应用时可能不被识别 - 即使你不需要传递实际数据，也要设一个占位值，否则拖放链中断
-
effectAllowed控制光标样式和可接受的拖放操作（'copy'/'move'/'link'），但不影响是否能拖动
drop 事件必须阻止默认行为，否则文件/链接无法落地
drop 触发前，浏览器会先派发 dragover，而它的默认行为是拒绝接收拖入内容。所以必须在 dragover 和 drop 中都调用 event.preventDefault()，否则 drop 根本不会触发（尤其对文件或外部链接）。
典型漏写场景：
立即学习“Java免费学习笔记（深入）”；
dropZone.addEventListener('dragover', (e) => {
e.preventDefault(); // ✅ 必须有
});
dropZone.addEventListener('drop', (e) => {
e.preventDefault(); // ✅ 必须有，否则 drop 被忽略
const data = e.dataTransfer.getData('text/plain');
console.log(data);
});
- 只写
dragover.preventDefault()不够，drop里也得写，两者缺一不可 - 如果目标区是
contenteditable或<input>，浏览器可能自动处理文本拖放，此时drop仍会触发，但数据可能已被插入，需谨慎读取getData - 移动端 Safari 对原生拖放支持极弱，基本不可用；需要拖放体验的应用应改用
pointerdown/move/up模拟
用 DragEvent.dataTransfer.items 读文件比 files 更可靠
当用户拖入文件时，e.dataTransfer.files 看似方便，但它只在 drop 事件中可用，且不包含文件路径、仅提供 File 对象。而 e.dataTransfer.items 是 DataTransferItemList，支持遍历并判断类型（文件 or 字符串），还能用 getAsFile() 提取文件。
dropZone.addEventListener('drop', (e) => {
e.preventDefault();
const items = e.dataTransfer.items;
for (let i = 0; i < items.length; i++) {
if (items[i].kind === 'file') {
const file = items[i].getAsFile();
console.log(file.name, file.type);
} else if (items[i].kind === 'string') {
items[i].getAsString((str) => console.log('text:', str));
}
}
});
-
items在dragenter和dragover中也可读（但只有类型信息，不能取内容），可用于提前判断是否接受该拖入 -
files是只读类数组，items更灵活，推荐优先使用 - 注意：Safari 15.4+ 才完整支持
items的getAsFile()，旧版需回退到files
不要依赖 dragleave 判断“拖出区域”，它触发不可靠
dragleave 并非每次鼠标移出都触发——只要拖动经过子元素，就会先触发子元素的 dragenter，再触发父元素的 dragleave，造成频繁误判。真实项目中几乎不用它来判断“是否还在区域内”。
更稳的做法是用计数器或 setTimeout + dragover：
let dragOverCount = 0;
dropZone.addEventListener('dragenter', () => {
dragOverCount++;
dropZone.classList.add('drag-over');
});
dropZone.addEventListener('dragleave', () => {
dragOverCount--;
if (dragOverCount === 0) {
dropZone.classList.remove('drag-over');
}
});
dropZone.addEventListener('drop', () => {
dragOverCount = 0;
dropZone.classList.remove('drag-over');
});
- 所有子元素也得监听
dragenter/dragleave并透传计数，否则嵌套结构下计数错乱 - 更轻量方案：只在
dragover中加 class，drop或dragend时清除，忽略“是否真的移出了” -
dragend是拖动结束（无论是否 drop），适合清理状态，但它不带位置信息，不能替代 leave 逻辑
dataTransfer 的隐式约束、事件触发时机的嵌套干扰、以及浏览器兼容性差异（尤其是 Safari 和移动端），让实际落地时容易卡在某个看似微小的点上。最常被忽略的是：没设 setData 就想拖 div，或者只防了 dragover 默认行为却忘了 drop 自己也要防。
