draggable="true" 仅启用拖拽入口，需在 dragstart 中调用 datatransfer.setdata() 否则流程中断；动态渲染需事件委托；跨列拖放应基于 dom 结构定位而非坐标；react/vue 中须用唯一 key 和 id 映射确保状态同步；移动端应降级为 touch 模拟或长按排序。
draggable="true" 为什么在看板里设了却拖不动
不是属性没生效，而是拖拽链断在了第一步：dragstart 事件里没调 dataTransfer.setData()。浏览器看到 draggable="true" 只会启用拖拽“入口”，但认为“没东西可拖”，直接跳过整个流程。
常见误操作：
- 只设了
draggable="true"，没绑dragstart监听器 -
dragstart里漏写e.dataTransfer.setData("text/plain", id)，或传了空字符串、undefined - 卡片是动态渲染的（比如 Vue 的
v-for或 React 的map），事件监听器没正确挂到新节点上
实操建议：用委托监听，避免反复绑定。例如给看板容器加 addEventListener("dragstart", handleDragStart)，再用 e.target.matches("[draggable='true']") 过滤目标。
跨列拖放时 drop 事件拿不到正确位置
用 event.clientY 算插入索引，在 Flex 布局+滚动容器里极不稳定——卡片高度不一、列有 padding/margin、滚动偏移都会让坐标失真。
更稳的做法是基于 DOM 结构定位：
- 在
drop回调里，先确认event.target是目标列内的卡片（或空白处） - 用
Array.from(column.children).indexOf(event.target)获取插入位置索引 - 如果
event.target === column（即拖到列空白处），则插入末尾，索引取column.children.length
注意：必须确保列容器本身 draggable="false"，否则它可能抢走 dragstart，导致跨列失败。
React/Vue 中拖拽后状态和 DOM 不同步
直接 setState([...cards.slice(0, i), draggedCard, ...cards.slice(i)]) 看似合理，但框架渲染滞后于 drop 事件回调，下一次拖拽时 event.target 拿到的是旧 DOM 节点，indexOf 返回错误索引。
关键修复点：
-
v-for必须用稳定唯一 ID 绑定:key，别用数组 index - React 中，
useEffect依赖数组必须包含全部影响渲染的状态项，漏掉columns就会跳过重渲染 - 拖拽结束时，优先从
event.currentTarget（即列 DOM）反查 state：通过dataset.columnId找到对应列数据，再用卡片 ID 查原数组索引
别依赖 DOM 顺序推导 state 顺序，要靠 ID 映射做双向锚定。
移动端 touch 拖拽降级的硬伤绕不开
Safari 和多数 WebView 对原生 draggable 支持极差，iOS 上基本不可用。强行开启只会触发文字选择或页面缩放。
真实可行方案只有两个：
- 检测
matchMedia("(pointer: coarse)").matches或 UA，自动切换为touchstart → touchmove → touchend模拟拖拽，自己维护位移和占位逻辑 - 对移动端禁用原生拖拽，改用长按弹出“排序模式”，进入后点击箭头微调顺序（更可控，体验也不差）
所有试图用 pointer-events: none + preventDefault 强撑原生 drag 的方案，在 iOS 上都会在某个 Safari 版本里突然失效——这不是 bug，是 Apple 明确不承诺支持。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
