17370845950

JavaScript拖放功能依赖Drag and Drop API，需监听dragstart、dragend、dragenter、dragover、drop共6个事件，关键前提是设置draggable="true"并在dragover中调用preventDefault()。

JavaScript 实现拖放功能主要依靠原生的 Drag and Drop API，核心是监听和处理一组特定的拖放事件。它不依赖鼠标按下/移动/释放的底层事件（如 mousedown），而是基于语义化的拖放生命周期事件。

必须处理的关键拖放事件

一个完整的可拖放交互至少要正确响应以下 6 个事件（分“拖拽源”和“放置目标”两类）：

• 拖拽源（被拖动的元素）上监听：
  • dragstart：拖拽开始时触发。在这里设置拖拽数据（event.dataTransfer.setData()）和可选的拖拽图标（event.dataTransfer.setDragImage()）。
  • drag：拖拽过程中持续触发（一般不用主动处理）。
  • dragend：拖拽结束（无论是否成功放置）时触发。适合清理状态、恢复样式等。
• 放置目标（允许接收拖拽的元素）上监听：
  • dragenter：拖拽元素首次进入目标区域时触发。常用来添加高亮样式（如加边框）。
  • dragover：拖拽元素在目标区域内移动时持续触发。⚠️ 必须调用 event.preventDefault()，否则浏览器默认会阻止放置行为（即 drop 不会触发）。
  • drop：用户在目标区域松开鼠标完成放置时触发。在这里读取数据（event.dataTransfer.getData()）、执行业务逻辑（如移动 DOM、更新数据）并阻止默认行为（避免打开文件等）。

基础实现三步走

让一个元素可拖、另一个元素可放，只需三个关键操作：

• 给拖拽源元素添加 draggable="true" 属性（HTML 属性，非 JS）。没有它，dragstart 不会触发。
• 在 dragstart 中调用 setData(type, data)，例如：
  event.dataTransfer.setData('text/plain', 'item-123');
• 在放置目标的 dragover 里写 event.preventDefault() —— 这是最容易遗漏也最关键的一步。

常见注意事项

实际开发中容易踩坑的地方：

• 只监听 drop 是不够的，dragover 必须拦截，否则 drop 永远不会发生。
• dataTransfer 的数据类型（如 'text/plain'、'text/html'、'application/json'）要前后一致，否则 getData() 可能返回空字符串。
• 跨 iframe 或跨窗口拖放受限于同源策略，且需双方都支持 DnD API。
• 移动端默认不支持原生 Drag and Drop，需借助第三方库（如 interact.js）或模拟 touch 事件实现类似效果。

简单示例：拖动列表项到容器中

HTML：

拖我
放到这里

JS：

source.addEventListener('dragstart', e => {
  e.dataTransfer.setData('text/plain', 'hello');
});

target.addEventListener('dragenter', e => {
  e.preventDefault();
  target.style.backgroundColor = '#e0f7fa';
});

target.addEventListener('dragover', e => {
  e.preventDefault(); // 关键！
});

target.addEventListener('drop', e => {
  e.preventDefault();
  target.style.backgroundColor = '';
  alert('接收到：' + e.dataTransfer.getData('text/plain'));
});

基本上就这些。原生拖放不复杂但容易忽略 dragover.preventDefault() 和 draggable="true" 这两个前提。