拖拽放不进目标列表，主因是dragover未调用preventdefault()导致drop被浏览器默认拦截，且dragstart未调用datatransfer.setdata()提供有效数据，e.target定位不准也会插错位置。
拖拽元素放不进目标列表，通常不是“功能坏了”，而是几个关键环节没配齐或配错。原生 HTML5 拖放 API 不是设个 draggable="true" 就能自动跑通的——它只开个门，进门、指路、安顿全得你手动安排。
dragover 事件里忘了 preventDefault()
这是最常见也最容易忽略的一环。浏览器默认会拦截非媒体类元素（比如 <div>、<code><li>）的 drop 行为。即使你拖着元素悬停在目标区域上，只要没在 dragover 事件中调用 event.preventDefault()，drop 就永远不会触发。
- 必须监听目标容器的
dragover，且里面一定要有e.preventDefault() - 仅写
e.stopPropagation()不够，它不解除浏览器默认拦截 - 如果目标是动态生成的，确保事件监听绑定到了正确且持续存在的父节点上
dragstart 里没设置 dataTransfer 数据
没有数据，drop 就成了“无源之水”。dataTransfer.setData() 不只是传个 ID，它是拖拽过程的唯一信标。drop 时靠它识别“拖来的是谁”。
- 必须在
dragstart中调用e.dataTransfer.setData('text/plain', someId)（或任意合法类型 + 值） - 别用空字符串或
undefined，否则getData()在 drop 里拿不到有效值 - 如果拖拽项是克隆出来的（比如用了
cloneNode），注意 ID 冲突会导致getElementById找错节点
drop 目标判断不准，插错了位置
很多代码直接写 target.appendChild(dragged)，结果元素总被塞到末尾，而不是用户想放的“B 和 C 之间”。这是因为 e.target 可能是子元素、空白区，甚至不是列表项本身。
- 用
e.target.closest('li')或对应容器选择器，精准定位目标项 - 插入前加判断：
if (dragged === targetItem) return，防止自己插自己 - 按鼠标垂直位置决定插前面还是后面：比较
e.clientY和目标项getBoundingClientRect().top + height/2
移动端或 Safari 特殊限制
原生 drag API 在 iOS Safari 和部分安卓 WebView 中支持极弱，甚至默认禁用。光标变手型也不代表能拖动成功。
- iOS Safari 需额外处理 body 滚动锁定（
position: fixed+ 滚动补偿） - 安卓 WebView 可能需要启用
android:hardwareAccelerated="true"并监听touchstart/touchmove模拟拖拽 - 更稳妥的做法：对移动设备降级使用
Sortable.js或react-dnd等封装库
