JavaScript拖放功能基于HTML5 Drag and Drop API，需设置draggable="true"启用非默认可拖元素，关键事件包括dragstart、dragenter、dragover（须preventDefault）、drop等，移动端不支持。
JavaScript 实现拖放功能主要依靠 HTML5 原生的 Drag and Drop API，核心在于正确监听和处理一组特定事件。它不依赖第三方库，但需注意浏览器兼容性（IE10+、Chrome、Firefox、Safari 均支持）以及默认行为的阻止。
哪些元素能被拖动？
默认只有图片（<img>）、链接（<a>）和选中的文本可拖动。若要让其他元素（如 <div>、<li>）可拖，必须设置其 draggable="true" 属性：
<div draggable="true" id="item">拖我</div>
```
关键拖放事件及处理逻辑
整个拖放过程涉及源元素（被拖的）和目标元素（被放置的），需分别监听以下事件：
-
dragstart：在拖动开始时触发（只在源元素上）。常用于设置拖拽数据（
dataTransfer.setData()）和自定义拖拽样式（如event.dataTransfer.effectAllowed = "move"） - drag：拖动过程中持续触发（源元素），一般无需处理
- dragend：拖动结束（无论是否放置成功）时触发（源元素），适合清理状态或恢复 UI
-
dragenter：拖拽对象进入目标元素边界时触发（目标元素）。必须调用
event.preventDefault()，否则后续的drop事件不会触发 -
dragover：拖拽对象在目标元素内移动时持续触发（目标元素）。同样必须调用
event.preventDefault()，否则浏览器会执行默认行为（如打开图片/链接），且drop也不会触发 - dragleave：拖拽对象离开目标元素时触发（目标元素），可用于取消高亮等反馈
-
drop：在目标元素上释放鼠标时触发（目标元素）。此时可通过
event.dataTransfer.getData()获取之前设置的数据，完成实际的业务逻辑（如移动 DOM、更新列表）
一个最小可用示例
实现一个 div 从 A 区域拖到 B 区域并移动过去：
立即学习“Java免费学习笔记（深入）”；
```jsconst item = document.getElementById('item');
const dropZone = document.getElementById('drop-zone');
item.addEventListener('dragstart', e => {
e.dataTransfer.setData('text/plain', 'item-id'); // 传标识符
});
dropZone.addEventListener('dragenter', e => e.preventDefault());
dropZone.addEventListener('dragover', e => e.preventDefault());
dropZone.addEventListener('drop', e => {
e.preventDefault();
const id = e.dataTransfer.getData('text/plain');
if (id === 'item-id') {
dropZone.appendChild(item); // 移动元素
}
});
```
注意事项与常见坑
- 所有
dragenter和dragover必须显式调用preventDefault()，这是启用drop的前提 -
dataTransfer只支持字符串类型数据；如需传对象，先JSON.stringify()，再JSON.parse() - 移动端不支持原生 Drag API，需用 touch 事件模拟（如
touchstart/touchmove）或借助库（如 interact.js） - 拖拽时浏览器会显示默认光标和半透明“影子”，可用
dataTransfer.setDragImage(el, x, y)自定义
