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()—— 这是最容易遗漏也最关键的一步。
常见注意事项
实际开发中容易踩坑的地方：
立即学习“Java免费学习笔记（深入）”；
- 只监听
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" 这两个前提。
