dragstart中必须调用setData()否则拖放失败；drop和dragover都需preventDefault()；推荐用dataTransfer.items读文件；避免依赖dragleave；移动端Safari需模拟拖放。
dragstart 事件里必须设置 dataTransfer 否则拖放会失败
浏览器默认只允许图片、链接、选中文本被拖动，其他元素（比如 常见错误是只写了 典型漏写场景： 立即学习“Java免费学习笔记（深入）”； 当用户拖入文件时， 更稳的做法是用计数器或 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 根本不会触发（尤其对文件或外部链接）。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 或 ，浏览器可能自动处理文本拖放，此时 drop 仍会触发，但数据可能已被插入，需谨慎读取 getData
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 更灵活，推荐优先使用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');
});
原生拖放 API 表面简单，但 dragenter/dragleave 并透传计数，否则嵌套结构下计数错乱dragover 中加 class，drop 或 dragend 时清除，忽略“是否真的移出了”dragend 是拖动结束（无论是否 drop），适合清理状态，但它不带位置信息，不能替代 leave 逻辑dataTransfer 的隐式约束、事件触发时机的嵌套干扰、以及浏览器兼容性差异（尤其是 Safari 和移动端），让实际落地时容易卡在某个看似微小的点上。最常被忽略的是：没设 setData 就想拖 div，或者只防了 dragover 默认行为却忘了 drop 自己也要防。
