dragstart中未调用setdata会导致拖拽链静默中断；移动端需降级处理，原生draggable在ios safari基本不可用。
dragstart里没调setData，拖拽链就静默中断
设了 draggable="true" 只是让浏览器准备接收拖拽，不是“拖起来就能传数据”。如果 dragstart 事件里漏掉 e.dataTransfer.setData("text/plain", cardId)，整个流程会在松手前就断掉：光标能变手形、卡片能抓起、但 drop 根本不触发，控制台也无报错。
常见踩坑点：
-
cardId来自e.target.dataset.id，不能是空字符串、undefined或null - 动态渲染的卡片（如 Vue 的
v-for、React 的map）容易漏绑事件，建议用事件委托：给看板容器监听dragstart，再用e.target.matches("[draggable='true']")过滤目标 - 别往
dataTransfer里塞 DOM 节点或复杂对象——Firefox 和跨 iframe 场景下getData()极大概率返回空字符串
drop 时靠 clientY 算插入位置，在 Flex + 滚动容器里必不准
用 event.clientY 对比每个卡片的 getBoundingClientRect().top 来决定插在哪，看似直观，实则在真实看板中极易偏移。滚动偏移、列内 padding/margin、卡片高度不一、缩放、字体渲染差异，都会让坐标失真。
更稳的做法是基于 DOM 结构定位：
- 在
drop回调里，先确认event.target是目标列内的卡片，还是列容器本身（即拖到空白处） - 若
event.target是卡片，用Array.from(column.children).indexOf(event.target)得到插入索引 - 若
event.target === column，说明拖到空白处，插入索引取column.children.length - 务必确保列容器自身设
draggable="false"，否则它可能抢走dragstart，导致跨列失败
React/Vue 中状态和 DOM 不同步，根源不在框架而在 ID 映射断裂
直接用数组切片更新状态（如 setState([...cards.slice(0, i), draggedCard, ...cards.slice(i)])），看似合理，但框架渲染滞后于 drop 回调。下一次拖拽时，event.target 拿到的仍是旧 DOM 节点，indexOf 返回错误索引。
关键修复逻辑是双向锚定：
-
v-for必须绑定稳定唯一:key，禁用数组 index - React 中
useEffect依赖数组必须包含所有影响渲染的状态项，漏掉columns就会跳过重渲染 - 拖拽结束时，优先从
event.currentTarget（即列 DOM）反查 state：通过dataset.columnId找到对应列数据，再用卡片 ID 查原数组索引 - 永远别依赖 DOM 顺序推导 state 顺序
移动端必须降级，原生 draggable 在 iOS Safari 基本不可用
iOS Safari 和多数 WebView 对原生 draggable 支持极差，强行开启只会触发文字选择或页面缩放。dragstart 根本不触发，不是代码写错了，是浏览器限制。
可行路径只有两条：
- 长按后进入“排序模式”，用
touchstart/touchmove模拟拖拽位移，配合transform: translateY()实现视觉跟随 - 放弃原生 API，改用
interact.js或sortablejs的 touch 适配层，它们内部做了大量兜底处理 - 别指望
dataTransfer在移动端传数据——它在 touch 场景下基本形同虚设
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
