SuperAPI AI 工具集

kanban-dnd

设计与创作

查看项目

更新于 10-16 08:05

技能介绍

该技能用于辅助构建看板/流水线的拖拽交互,核心基于 @dnd-kit 技术栈。适用场景包括:搭建看板或流水线面板、实现卡片跨列移动、需要优先命中列而非卡片的碰撞检测、以及希望获得类似 Linear/Notion 的拖拽体验。

安装方式:bun add @dnd-kit/core @dnd-kit/modifiers @dnd-kit/utilities。架构上由 DndContext 承载传感器、碰撞检测和事件处理,列作为 droppable,卡片作为 draggable,DragOverlay 跟随光标。

主要模式包括:自定义碰撞检测优先返回列 droppable(列数据需设置 data.type 为 column);使用 useDraggable 实现跨列移动;通过 findTargetColumnId 将落点解析为列 ID;DragOverlay 使用 snapCenterToCursor 并设置 dropAnimation={null}。传感器配置强调使用 distance 约束而非延迟,鼠标用 MouseSensor(distance: 4)即时拖拽,触摸用 TouchSensor(delay: 200, tolerance: 8)以保留移动端滚动。还涉及视觉反馈状态、列内排序与可排序列(useSortable 嵌套 SortableContext,避免与 useDroppable 重复注册)、放置指示线、拖拽手柄悬停展开、从缓存读取列项以及可撤销拖拽操作。

限制与说明:以上为其文档描述的实现模式,具体项目集成细节及完整源码示例请参考原技能页面;资料未提供价格、平台支持范围或性能基准等信息。