javascript如何实现拖放功能_有哪些相关的API

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
• 移动端 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 逻辑