JavaScript拖放功能依赖原生Drag and Drop API，需设置draggable="true"、监听dragstart传数据、dragover阻止默认、drop取数据。
JavaScript实现拖放功能主要依靠原生的拖放事件（Drag and Drop API），关键在于正确设置元素的可拖拽属性，并监听一系列标准拖放事件。核心不是靠鼠标移动计算，而是浏览器原生支持的语义化事件流。
让元素可拖拽：draggable 属性必须开启
默认情况下，只有图片、链接等少数元素支持拖拽。要让任意元素（如 div、span）可拖拽，必须显式设置 draggable="true"：
- HTML 中直接写：拖我试试
- JS 动态设置：element.draggable = true 或 element.setAttribute('draggable', 'true')
- 注意：仅设 draggable=true 不会自动触发拖放逻辑，还需监听事件并阻止默认行为
关键拖放事件及监听顺序
拖放过程包含 7 个标准事件，按时间顺序依次触发。常用的是以下 5 个，建议在拖拽源（被拖元素）和放置目标（接收区域）上分别监听：
- dragstart（源元素）：拖拽开始时触发。在此设置 event.dataTransfer.setData(format, data) 传数据，例如 e.dataTransfer.setData('text/plain', 'item-123')
- dragover（目标元素）：拖拽进入目标区域时持续触发。必须调用 e.preventDefault()，否则浏览器默认禁止放置
- dragenter（目标元素）：首次进入目标边界时触发，适合添加高亮样式
- dragleave（目标元素）：离开目标边界时触发，适合移除高亮
- drop（目标元素）：松开鼠标完成放置时触发。用 e.dataTransfer.getData(format) 取回数据，并执行实际插入/移动逻辑
常见坑点与处理建议
拖放交互容易出问题，注意这几个细节：
立即学习“Java免费学习笔记（深入）”；
- 目标元素若为空容器（如空 div），需设置最小宽高或 padding，否则 dragenter/dragover 可能不触发
- dragover 必须阻止默认行为，否则 drop 事件永远不会触发 —— 这是最常见的失败原因
- 移动端不支持原生 Drag API，如需兼容需借助第三方库（如 interact.js）或模拟 touch 事件
- 跨 iframe 拖放需确保同源，且目标 iframe 内容加载完成后才能绑定事件
一个最小可用示例
两个 div，把左边的拖到右边：
<div id="source" draggable="true">拖我</div>
<div id="target">放这里</div>
<script>
const src = document.getElementById('source');
const tgt = document.getElementById('target');
src.addEventListener('dragstart', e => {
e.dataTransfer.setData('text/plain', 'moved');
});
tgt.addEventListener('dragover', e => e.preventDefault()); // 关键！
tgt.addEventListener('drop', e => {
e.preventDefault();
tgt.textContent = e.dataTransfer.getData('text/plain');
});
</script>
不复杂但容易忽略。只要记住 draggable=true + dragstart 传数据 + dragover 阻止默认 + drop 取数据，拖放就跑起来了。
