## 问题描述 原生 HTML5 拖拽存在以下问题： - 首次拖拽仅选中项目（显示缩放效果）但不移动 - 需要拖拽两次才能实际移动项目 - 鼠标悬停在交互元素上时显示禁止符号 ## 根本原因 原生 HTML5 拖拽 API 设计于 2000 年代，对现代 Web 应用的复杂交互支持不佳，特别是与嵌套交互元素共存时会出现冲突。 ## 解决方案 使用 @dnd-kit 库替代原生 HTML5 拖拽： 1. 安装依赖：npm install @dnd-kit/core @dnd-kit/sortable @dnd-kit/utilities 2. 使用 PointerSensor 配合 activationConstraint: { distance: 8 } 防止误触 3. 使用 useDroppable 包装列，支持向空列拖拽 4. 使用 closestCorners 碰撞检测算法