HTML5拖放API使用教程详解

常见错误：写了 ondragstart 但没加 draggable="true"，结果完全没反应。别跳过这一步。

dragstart 里必须调用 setData() 否则拖拽中断

在 dragstart 事件中，不调用 event.dataTransfer.setData()，Chrome/Firefox 会直接取消拖拽流程（松手即结束，目标区域收不到 drop）。这是最容易被忽略的硬性要求。

常用写法：

element.addEventListener('dragstart', (e) => {
  e.dataTransfer.setData('text/plain', e.target.id); // 必须有这一行
});

说明：

• 'text/plain' 是最兼容的类型，'text/html' 或自定义类型（如 'application/json'）在跨浏览器时可能失效
• 值可以是任意字符串，比如 ID、JSON 字符串，但不能是对象或函数
• 不设类型或设错类型，drop 事件里的 getData() 就拿不到东西

目标区域要阻止 dragover 默认行为才能触发 drop

很多新手卡在「能拖但放不进去」——根本原因是没处理 dragover。浏览器默认会阻止元素成为有效放置目标，所以必须监听并 preventDefault()：

dropZone.addEventListener('dragover', (e) => {
  e.preventDefault(); // 关键！没有这行，drop 事件永远不会触发
});

注意点：

• 只阻止 dragover 就够了，dragenter 不需要（除非你要高亮提示）
• 如果目标是 <input type="file"> 这类原生控件，它自己已处理，不用额外干预
• 若目标区域是空
  ，记得给它设个最小高度/边框，否则视觉上“看不见”可拖区域

drop 里取数据要用 getData()，且类型必须匹配 setData()

在 drop 事件中，靠 e.dataTransfer.getData('text/plain') 拿到拖拽时存的数据。类型字符串必须和 setData() 时一致，否则返回空字符串。

典型操作链：

dropZone.addEventListener('drop', (e) => {
  e.preventDefault();
  const id = e.dataTransfer.getData('text/plain'); // 类型要严格一致
  const draggedEl = document.getElementById(id);
  if (draggedEl) {
    dropZone.appendChild(draggedEl); // 移动元素
  }
});

易错提醒：

• 忘了 e.preventDefault() → 页面会跳转（如果是拖链接）或打开文件（如果是拖文件）
• 类型写成 'Text/Plain'（大小写敏感）→ 返回空
• 试图用 getData('text/html') 取 setData('text/plain') 存的值 → 拿不到

真正麻烦的不是 API 多难记，而是每个环节都有一个“非做不可”的小动作：设 draggable、调 setData、阻 dragover、配对 getData 类型。漏一个，整个链就断了。

好了，本文到此结束，带大家了解了《HTML5拖放API使用教程详解》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！