在敏捷项目协同、任务排期与低代码工作流软件（如 Linear、Jira、Trello、Notion 及 GitHub Projects）中，看板（Kanban Board） 与 拖拽排序（Drag & Drop Reordering） 是承载任务状态流转和优先级调配的最核心交互形式。

然而，在日常产研协作中，拖拽往往成为设计师与前端工程师沟通成本最高的地带：

• 设计师通常只交付了静态的卡片排版，未定义当用户“按住并开始拖动”时的瞬间视觉反馈；
• 目标泳道（Drop Target Lane）缺乏明确的插入指示器（Drop Indicator / Insertion Placeholder），导致开发不知道何时腾出位移空间，上线后界面出现剧烈的重排抖动（Layout Thrashing）；
• 移动端触摸冲突（Touch vs Scroll）和仅依赖鼠标的交互设计，严重违反了 Web 无障碍标准（a11y），导致无法通过键盘进行排序。

本文将深入拆解从画布容器、弹性泳道、卡片状态机、Figma 原生 On drag 智能动效到 Dev Mode 前端工程交付的全流程规范。

---

拖拽看板与排序列表全维交互横评

在构建组件库前，必须根据业务场景明确容器交互维度：

评估维度	简单单列排序列表 (Sortable List)	树形拖拽导轨 (Sortable Tree)	跨泳道看板系统 (Kanban Board)
拓扑自由度	仅一维垂直方向（Y 轴）线性位移	Y 轴位移 + X 轴层级缩进（Parent-Child）	二维自由度（列内 Y 轴垂直排序 + 跨列 X 轴水平流转）
容器间数据流转	单一数组索引调换（Index Reorder）	节点从属关系树状拓扑重构	状态机流转（从 To Do 状态机流转至 In Progress / Done）
放置指示器形态	1~2px 细线插入器或半高占位块	树形连线高亮导轨与吸附虚线框	等高占位插槽（Placeholder Slot） 或发光虚线高亮框
极端空容器处理	通常不会存在空状态	节点可作为叶子节点折叠收起	空泳道（Empty Lane）防塌陷，提供专属放置热区
前端推荐库	HTML5 原生或 framer-motion	复杂的树组件如 react-arborist	现代企业级标准 @dnd-kit/core 或 vuedraggable

---

看板系统三层拓扑架构

一个鲁棒且能够承载百级任务的看板系统，严格遵循三层 Auto Layout 自动布局 嵌套架构：

┌────────────────────────────────────────────────────────────────────────┐
│ Level 1: Board Viewport 看板视口容器 (水平 Auto Layout, Overflow: Auto)  │
│  ┌───────────────────────┐  ┌───────────────────────┐  ┌───────────┐  │
│  │ Level 2: Lane (To Do) │  │ Level 2: In Progress  │  │ Level 2... │  │
│  │  ┌─────────────────┐  │  │  ┌─────────────────┐  │  │           │  │
│  │  │ Header 泳道标题  │  │  │  │ Header 泳道标题  │  │  │           │  │
│  │  ├─────────────────┤  │  │  ├─────────────────┤  │  │           │  │
│  │  │ Level 3: Card A │  │  │  │ Level 3: Card C │  │  │           │  │
│  │  ├─────────────────┤  │  │  ├─────────────────┤  │  │           │  │
│  │  │ Level 3: Card B │  │  │  │ [Drop Indicator] │  │  │           │  │
│  │  └─────────────────┘  │  │  └─────────────────┘  │  │           │  │
│  └───────────────────────┘  └───────────────────────┘  └───────────┘  │
└────────────────────────────────────────────────────────────────────────┘

1. Level 1: Board Viewport（看板视口）

• 布局属性：水平方向 Auto Layout，间距设为 16px 或 24px；
• 尺寸规则：宽度设为 Fill container，高度设为 Fill container；
• 滚动机制：在 Figma 原型设置中开启 Horizontal and vertical scrolling，确保横向列超出视口时支持平滑滚动。

2. Level 2: Lane Container（泳道列容器）

• 宽度规格：固定宽度（Fixed width，通常采用 280px ~ 320px 标准宽度，便于内容扫描）；
• 容器结构：
  • Lane Header：包含状态圆点、泳道名称（如 In Review）、Badge 任务计数角标 以及右侧快捷新建按钮（+）；
  • Cards Stack（卡片列表槽）：垂直 Auto Layout，间距 8px ~ 12px，高度设为 Hug contents，底部添加 min-height: 120px 保护，防止泳道在卡片清空时塌陷消失。

3. Level 3: Kanban Card（任务卡片）

• 尺寸规则：宽度一律设为 Fill container，自适应撑满所在泳道；
• 内部插槽布局：包含优先级 Tag、任务编号、标题正文、重叠头像组 Avatar Group 与截止时间标签。

---

拖拽生命周期 4 大核心视觉状态机

当用户与卡片交互时，必须严格定义这 4 个连续阶段的视觉表现，杜绝状态跳跃：

[Idle (静止状态)]
       │  用户鼠标按下拖拽手柄 (Pointer Down & Drag Start)
       ▼
[Lifted / Dragging (抓取悬浮态)]  ── 阴影跃升、旋转 2°、半透明拖影、指针变为 grabbing
       │  移动至目标泳道上方 (Pointer Enters Drop Target)
       ▼
[Drop Target / Insertion (插入占位态)] ── 目标列表展开等高虚线插槽，相邻卡片让位平移
       │  松开鼠标释放 (Pointer Up & Drop)
       ▼
[Settled (放置入位态)] ── 物理弹簧弹性回落入位，更新列计数 Tokens

1. Idle（静态默认态）

卡片处于常规文档流中，底色绑定 surface/card，边框 1px 微弱中性色，无阴影或使用微弱的 shadow/sm。

2. Lifted / Dragging（抓取悬浮态）

用户开始拖动卡片瞬间：

• 层级提升：卡片脱离常规文档流，在视觉上浮起，Design Tokens 阴影提升至 Elevation 4（shadow/2xl）；
• 倾斜与缩放：微调卡片角度 Rotation: 2deg 或 3deg，并轻微放大 Scale: 1.02，强化物理抓取的“重力悬浮感”；
• 半透明感：不透明度设为 95%，允许底层内容依稀可见；
• 光标手势：全局光标变更为 grabbing（抓手闭合）。

3. Drop Target / Insertion Placeholder（插入占位态）

在卡片悬浮被拖动时，目标泳道必须预先腾出接纳该卡片的物理空间：

• 占位符卡片（Drop Slot）：其高度与正在拖拽的卡片完全一致（例如 84px），采用 2px 虚线描边（Dashed border，颜色绑定 brand/primary），底色采用浅色半透明微光（brand/subtle 5%）；
• 动态避让：通过 Figma 现代 Auto Layout 的流式排版，周围的卡片自动向下避让平移，明确告知用户释放鼠标后卡片将落入的精确位置。

4. Settled（放置回落态）

鼠标松开瞬间，卡片从悬浮姿态快速收敛回 Rotation: 0deg，阴影平滑回退至 shadow/sm，同时原占位虚线框淡出销毁。

---

Figma 原生 On Drag + Smart Animate 高级原型实操

借助 Figma 的 Smart Animate（智能动画） 与图层同名匹配机制，无需第三方插件即可制作极其真实的跨列拖拽原型：

[Frame 1: 初始画布]                          [Frame 2: 拖拽悬浮中]                          [Frame 3: 拖拽完成]
┌────────────┐  ┌────────────┐       ┌────────────┐  ┌────────────┐       ┌────────────┐  ┌────────────┐
│ Lane: Todo │  │ Lane: Prog │       │ Lane: Todo │  │ Lane: Prog │       │ Lane: Todo │  │ Lane: Prog │
│ ┌────────┐ │  │            │       │            │  │ ┌────────┐ │       │            │  │ ┌────────┐ │
│ │ Card X │ │  │            │ ───►  │ [Ghost-X]  │  │ │[Slot-X]│ │ ───►  │            │  │ │ Card X │ │
│ └────────┘ │  │            │  Drag │            │  │ └────────┘ │ Drop  │            │  │ └────────┘ │
└────────────┘  └────────────┘       └────────────┘  └────────────┘       └────────────┘  └────────────┘
                                                     ▲
                                             悬浮的 [Card X] (漂移在空中)

步骤 1：精确图层命名与骨架对齐

1. 在 Frame 1 中，将目标卡片命名为精确的标识符（例如 KanbanCard-Task-101）；
2. 在 Frame 2 中，复制一份该卡片，将其绝对定位放置在“InProgress 泳道”上方，设置旋转 2.5°，阴影设为 Elevation/High；同时在原 Todo 泳道内放置一个同高半透明的原位幽灵块（Ghost slot）；
3. 在 Frame 3 中，将 KanbanCard-Task-101 正常放入 InProgress 泳道的 Auto Layout 流式列表中，角度归零，移除虚线占位框。

步骤 2：手势触发连线配置

• 从 Frame 1 到 Frame 2：
  • 选中 KanbanCard-Task-101；
  • Trigger: On drag；
  • Action: Navigate to -> 选择 Frame 2；
  • Animation: Smart Animate，曲线选择 Ease out，时长 150ms。
• 从 Frame 2 到 Frame 3：
  • 选中悬浮卡片；
  • Trigger: After delay: 1ms 或 On click / Mouse up；
  • Action: Navigate to -> 选择 Frame 3；
  • Animation: Smart Animate，曲线选择 Figma Motion 物理弹簧参数（Spring: Stiffness 240, Damping 22, Mass 1），让卡片以极其自然的物理回弹手感吸附入位。

---

边界与极端状态防护（Edge Cases）

异常边界场景	界面与交互表现	推荐规范策略
拖拽至非合法区域释放 (Invalid Drop)	用户将卡片拖向画布空白处或只读泳道	触发“取消操作（Cancel Drag）”，卡片通过 Smart Animate 沿原路径快速飞回初始位置
超长卡片内容拖拽 (Tall Card Drag)	卡片包含大量检查清单或多行长文本（>240px）	拖拽起飞瞬间限制卡片最大高度（Max-height: 160px）并省略内容，防止遮挡过大的视口目标
空泳道拖拽吸附 (Empty Lane)	目标泳道内目前无任何任务卡片	泳道内容区渲染空状态虚线容器，高度设为 100px，只要指针进入即可高亮吸附
快速连续拖拽重排 (Fast Stagger Drag)	用户在 1 秒内连续拖拽多张卡片	开启图层防抖，禁止动画堆叠造成图层重叠错位

---

Dev Mode 前端工程化交付与 W3C 无障碍规范

在 Dev Mode 开发模式 中交付拖拽看板时，应清晰标明参数与现代开源前端实现架构：

┌────────────────────────────────────────────────────────┐
│  Dev Mode 看板拖拽参数对照字典                          │
├──────────────────────────┬─────────────────────────────┤
│ 属性参数                  │ 前端工程规范                │
├──────────────────────────┼─────────────────────────────┤
│ Drag Activation Distance │ pointer: 3px / delay: 150ms │
│ Dragging Elevation       │ box-shadow: var(--shadow-2xl│
│ Dragging Rotation        │ transform: rotate(2deg)     │
│ Drop Indicator Border    │ 2px dashed var(--color-brand│
│ Settled Transition       │ cubic-bezier(0.2, 0, 0, 1)  │
└──────────────────────────┴─────────────────────────────┘

1. 现代前端技术选型（@dnd-kit/core）

现代 React 前端工程普遍摒弃过时的原生 HTML5 Drag API，推荐采用模块化轻量的 @dnd-kit：

import React from 'react';
import { DndContext, DragOverlay, closestCorners } from '@dnd-kit/core';
import { SortableContext, verticalListSortingStrategy } from '@dnd-kit/sortable';
import { KanbanCard, KanbanLane } from './components';

export function KanbanBoard() {
  const [activeTask, setActiveTask] = React.useState(null);

  return (
    <DndContext
      collisionDetection={closestCorners}
      onDragStart={({ active }) => setActiveTask(active.data.current)}
      onDragEnd={handleDragEnd}
    >
      <div className="flex gap-4 p-6 overflow-x-auto">
        <KanbanLane id="todo" title="待处理" count={todoList.length}>
          <SortableContext items={todoList} strategy={verticalListSortingStrategy}>
            {todoList.map(task => <KanbanCard key={task.id} task={task} />)}
          </SortableContext>
        </KanbanLane>
      </div>

      {/* 悬浮在顶层的拖拽半透明副本 */}
      <DragOverlay>
        {activeTask ? <KanbanCard task={activeTask} isDragging /> : null}
      </DragOverlay>
    </DndContext>
  );
}

2. 键盘无障碍可访问性（a11y Keyboard Reordering）

根据 W3C WAI-ARIA Authoring Practices (APG) 规范，拖拽排序绝不能将无鼠标或盲人用户排除在外：

• 抓取操作：用户使用 Tab 键聚焦在卡片拖拽手柄上，按 Space（空格键） 激活抓取，读屏器朗读：“已抓取任务卡片 101，当前位于待处理第 1 项，共 5 项”；
• 移动位置：按 ArrowUp / ArrowDown 在当前列调整上下顺序；按 ArrowRight / ArrowLeft 跨泳道移动；
• 放置释放：按 Space（空格键） 或 Enter（回车键） 确认放置，读屏器即时反馈：“已放置在进行中泳道第 2 项”；按 Escape 键随时取消并复位。

关于复杂设计系统变量与 Tokens 规范可查阅 Design Tokens 命名对照手册；关于移动端手势与抽屉吸附实战可查阅 Figma 底部抽屉与拖拽手势高级原型实战。