JavaScript拖放功能基于HTML5 Drag and Drop API，需设置draggable="true"启用非默认可拖元素，关键事件包括dragstart、dragenter、dragover（须preventDefault）、drop等，移动端不支持。
JavaScript 实现拖放功能主要依靠 HTML5 原生的 Drag and Drop API，核心在于正确监听和处理一组特定事件。它不依赖第三方库，但需注意浏览器兼容性（IE10+、Chrome、Firefox、Safari 均支持）以及默认行为的阻止。
哪些元素能被拖动？
默认只有图片（ 整个拖放过程涉及源元素（被拖的）和目标元素（被放置的），需分别监听以下事件： 实现一个 div 从 A 区域拖到 B 区域并移动过去： 立即学习“Java免费学习笔记（深入）”；）和选中的文本可拖动。若要让其他元素（如 ）可拖，必须设置其 draggable="true" 属性：```html
```关键拖放事件及处理逻辑
dataTransfer.setData()）和自定义拖拽样式（如 event.dataTransfer.effectAllowed = "move"）event.preventDefault()，否则后续的 drop 事件不会触发event.preventDefault()，否则浏览器会执行默认行为（如打开图片/链接），且 drop 也不会触发event.dataTransfer.getData() 获取之前设置的数据，完成实际的业务逻辑（如移动 DOM、更新列表）一个最小可用示例
const 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()
touchstart/touchmove）或借助库（如 interact.js）dataTransfer.setDragImage(el, x, y) 自定义
