拖拽功能不起作用？先检查这三件事：1. 被拖元素是否设置 draggable="true"；2. 是否在 dragstart 中调用 dataTransfer.setData()；3. drop 区域是否在 dragover 中调用 preventDefault()。
拖拽功能不起作用？先检查这三件事
HTML5 原生拖放（Drag and Drop）API 表面简单，实际启用失败最常见原因就三个：draggable 属性没设、dragstart 事件没绑定、或 drop 区域没阻止默认行为。浏览器默认会把 img、a 和选中文本当作可拖元素，但自定义元素（如 div）必须显式加 draggable="true" 才能触发拖拽流程。
实操建议：
立即学习“前端免费学习笔记（深入）”；
-
draggable="true"必须写在被拖拽的元素上（不是父容器），且只对鼠标操作生效，不支持触摸设备 - 在
dragstart里至少调用一次event.dataTransfer.setData()，否则 Chrome/Firefox 会静默禁用后续drop -
drop目标必须监听dragover并在其中调用event.preventDefault()，否则drop事件根本不会触发
dataTransfer.setData() 的 type 参数不能乱填
很多初学者以为 dataTransfer.setData("text/plain", "hello") 中的 "text/plain" 可以随便换，比如写成 "mydata" 或 "json" —— 这会导致 Firefox 拒绝接收数据，Chrome 虽然接受但 getData() 返回空字符串。原生 API 对 type 字符串有隐式校验逻辑，只有少数 MIME 类型被广泛支持。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 跨浏览器兼容首选
"text/plain"和"text/html"；若需结构化数据，先JSON.stringify()再用"text/plain"存储 - 避免使用自定义 type（如
"app/item-id"），除非你只在同页面内拖放且明确控制所有监听逻辑 -
dataTransfer.effectAllowed和dropEffect只影响光标样式，不影响数据传递，别指望靠它做权限控制
为什么 drop 事件总不触发？90% 是 dragover 没处理好
drop 事件能否触发，完全取决于 dragover 是否被阻止默认行为。这不是可选项，是强制链路：没有 preventDefault() 的 dragover，浏览器就认定该区域“不可投放”，直接跳过 drop。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 不要只给目标元素绑
drop，必须同时绑dragover并在回调里写event.preventDefault() - 如果目标是空
div，它默认高度为 0，视觉上“拖不进去”——加min-height: 20px或padding确保有可 hover 区域 - 移动端不支持这套 API，Safari iOS 也仅限部分场景（如从地址栏拖链接），别试图用它做响应式拖拽列表
拖拽排序时如何获取目标位置？用 clientX/clientY + getBoundingClientRect()
原生 API 不提供“拖到第几个子元素之间”这种语义信息。drop 事件只告诉你落在哪个元素上，要实现列表插入排序，得手动计算鼠标相对于目标容器的位置。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 在
drop回调中，用event.clientX和event.clientY获取坐标，再调用目标容器的getBoundingClientRect()计算相对偏移 - 对列表项逐个比对
offsetTop + offsetHeight / 2，判断鼠标在哪个 item 的上半/下半区，从而决定插在前面还是后面 - 别依赖
dataTransfer.items做 DOM 重排——它只适用于文件拖入等外部源，内部拖拽请直接操作 DOM 引用或 ID
真正麻烦的不是 API 调用，而是边界情况：快速拖拽时事件丢失、嵌套容器的 dragover 冒泡冲突、键盘焦点与拖拽状态不同步。这些没法靠文档解决，得靠 console.log(event) 实时看事件流。
