JavaScript DOM 拖拽核心是 HTML5 拖放 API，通过 draggable="true" 启用拖拽，在 dragstart 中用 dataTransfer.setData() 存数据并设视觉反馈；目标区需阻止 dragover 默认行为以启用 drop；drop 时用 getData() 取数据并执行移动、复制等操作；现代浏览器支持良好，但移动端和 iframe 有局限。
JavaScript DOM 操作实现元素拖拽并放置到目标区域，核心是利用原生 drag 和 drop 事件（即 HTML5 拖放 API），配合 dataTransfer 对象传递数据。关键不是靠鼠标坐标手动计算，而是通过事件生命周期控制拖拽流程。
启用拖拽与设置拖拽数据
要让一个元素可拖拽，需满足两个条件：一是设置 draggable="true" 属性；二是监听 dragstart 事件，在其中用 dataTransfer.setData() 存储标识信息（如元素 ID、类型或自定义 JSON 字符串）。
- 只对需要拖拽的元素（如卡片、图标）添加
draggable="true"，避免误触 -
dragstart中应设置至少一种格式，推荐"text/plain"或"text/id"，例如：event.dataTransfer.setData("text/id", "item-123"); - 可选：在
dragstart中添加视觉反馈，比如半透明样式：event.target.style.opacity = "0.5";
允许目标区域接收拖拽
默认情况下，任何元素都不接受拖放。必须显式阻止 dragover 和 dragenter 的默认行为，才能让 drop 事件触发。
- 为容器（如
<div class="drop-zone">）绑定dragover事件，并调用event.preventDefault() - 也可监听
dragenter做进入提示（如高亮边框），同样要preventDefault() - 注意：仅阻止
dragover就足够激活 drop 区域，dragenter/dragleave用于增强体验
在目标区域执行放置逻辑
drop 事件触发时，从 dataTransfer.getData() 取出之前存的数据，再决定如何处理——移动、复制、创建新节点等。
立即学习“Java免费学习笔记（深入）”；
- 务必在
drop中调用event.preventDefault()（否则部分浏览器可能跳转或下载） - 获取拖拽源：用
getData("text/id")得到 ID，再用document.getElementById()查找原元素 - 常见操作：
• 移动：直接targetElement.appendChild(draggedNode)
• 复制：用draggedNode.cloneNode(true)再追加
• 关联：仅记录 ID 映射关系，不移动 DOM - 建议在
dragend中还原视觉状态（如恢复 opacity）
注意事项与兼容性提醒
该 API 在所有现代浏览器中稳定支持（Chrome/Firefox/Safari/Edge ≥12），但不支持 IE9 及以下。移动端需额外处理（原生 drag/drop 在 iOS/Android 上受限，常需结合 touch 事件模拟）。
- 不能跨 iframe 拖拽（除非同源且显式授权）
-
dataTransfer只能传字符串，复杂数据需序列化（如JSON.stringify） - 若需精确位置（如排序插入中间），可在
dragover中用event.clientY判断相对位置，配合insertBefore - 避免在
drop中直接修改event.target样式，应操作业务容器而非事件目标本身
