JavaScript拖拽实现与事件监听设置

本文深入解析了JavaScript原生拖拽功能的核心机制与常见陷阱：必须显式设置`draggable="true"`才能触发拖拽流程；`drop`事件不触发的根本原因在于`dragover`阶段未调用`event.preventDefault()`——这是浏览器规范的强制要求，而非Bug；`dataTransfer`仅可靠传递`text/plain`格式的字符串，且严格受限于同源策略，跨域场景下兼容性极差；此外，还提醒开发者关注`dragenter`/`dragleave`事件对用户体验的影响，避免因状态管理不当导致视觉反馈错乱。掌握这三点关键约束，才能稳定实现符合预期的拖放交互。

直接用 dragstart、dragover、drop 这三个事件就能实现基础拖放，但不阻止默认行为的话，drop 事件根本不会触发。

为什么 drop 事件不触发？

浏览器对 drop 有严格限制：只要没在 dragover 阶段调用 event.preventDefault()，就拒绝执行 drop。这不是 bug，是规范强制要求。

• dragstart：在被拖元素上监听，用于设置 dataTransfer
• dragover：在目标容器上监听，必须调用 event.preventDefault()，否则 drop 不会触发
• drop：在目标容器上监听，此时才能读取 event.dataTransfer.getData()

dataTransfer 怎么传数据？

dataTransfer 只支持字符串类型，且只在同源页面间可靠传递；跨域或跨标签页时，多数浏览器仅保留 text/plain 或文件信息。

• 设置数据：在 dragstart 中调用 event.dataTransfer.setData('text/plain', 'my-id-123')
• 读取数据：在 drop 中调用 event.dataTransfer.getData('text/plain')
• 不要用 'text/html' 或自定义 MIME 类型——兼容性差，Chrome/Firefox 表现不一致

如何让元素可拖动？

不是所有元素默认可拖，需显式设置 draggable="true" 属性，否则 dragstart 根本不会触发。

• HTML 元素如
  才能触发拖拽流程
• 和 默认可拖，但拖出的是图片 URL 或链接地址，不是你想要的业务数据
• 用 JS 动态设置： element.draggable = true 等价于加属性

const item = document.querySelector('#todo-1');
item.draggable = true;

item.addEventListener('dragstart', (e) => {
  e.dataTransfer.setData('text/plain', item.dataset.id);
});

const dropZone = document.querySelector('.list');
dropZone.addEventListener('dragover', (e) => {
  e.preventDefault(); // 关键！否则 drop 不触发
});
dropZone.addEventListener('drop', (e) => {
  e.preventDefault();
  const id = e.dataTransfer.getData('text/plain');
  console.log('dropped:', id);
});