拖拽与调整

GanttFlow 提供了流畅的拖拽和调整功能，帮助用户快速修改任务时间。

启用拖拽

<EnhancedGanttChart
  tasks={tasks}
  enableDragging={true}    // 启用拖拽移动
  enableResizing={true}    // 启用调整大小
  enableDragGuides={true}  // 显示拖拽辅助线
/>

拖拽事件

监听拖拽事件来响应任务移动：

const handleTaskDrag = (task, event, newStart, newEnd) => {
  console.log("任务被拖动:", task.name)
  console.log("旧时间:", task.start, "-", task.end)
  console.log("新时间:", newStart, "-", newEnd)
}

const handleTaskDragEnd = (task) => {
  console.log("拖拽结束:", task.name)
  // 可以在这里保存到服务器
}

<EnhancedGanttChart
  tasks={tasks}
  onTaskDrag={handleTaskDrag}
  onTaskDragEnd={handleTaskDragEnd}
/>

拖拽辅助

GanttFlow 提供了磁吸效果和辅助线来提升拖拽体验：

磁吸效果

当拖拽接近其他任务边界时，会自动吸附：

<EnhancedGanttChart
  tasks={tasks}
  enableSnap={true}        // 启用磁吸
  snapThreshold={5}        // 磁吸阈值（像素）
  snapToDependencies={true} // 吸附到依赖任务边界
/>

辅助线

拖拽时会显示对齐辅助线：

<EnhancedGanttChart
  tasks={tasks}
  enableDragGuides={true}
  guideColor="#4f46e5"      // 辅助线颜色
  guideWidth={1}           // 辅助线宽度
/>

对齐辅助线类型

类型	说明
时间对齐	与其他任务开始/结束时间对齐
今日线对齐	与当前时间对齐
周末边界对齐	与周末边界对齐

进度调整

可以直接拖拽任务条上的进度条来调整完成度：

const handleProgressChange = (task, progress) => {
  console.log(`${task.name} 进度更新为 ${progress}%`)
  // 更新任务数据
}

<EnhancedGanttChart
  tasks={tasks}
  enableProgress={true}    // 允许调整进度
  onProgressChange={handleProgressChange}
/>

任务折叠

支持父子任务层级的折叠展开：

const handleTaskToggle = (task, collapsed) => {
  console.log(`${task.name} 被 ${collapsed ? "折叠" : "展开"}`)
}

<EnhancedGanttChart
  tasks={tasks}
  enableGrouping={true}    // 启用分组
  onTaskToggle={handleTaskToggle}
/>

禁用特定任务的拖拽

可以为特定任务禁用拖拽：

const tasks = [
  {
    id: "1",
    name: "固定任务",
    start: "2024-01-01",
    end: "2024-01-05",
    draggable: false,  // 这个任务不可拖拽
    resizable: false   // 这个任务不可调整大小
  },
  {
    id: "2",
    name: "可拖拽任务",
    start: "2024-01-06",
    end: "2024-01-10",
    // 默认可以拖拽和调整
  },
]

约束条件

最小任务时长

<EnhancedGanttChart
  tasks={tasks}
  minTaskDuration={24 * 60 * 60 * 1000}  // 最小 1 天（毫秒）
/>

最大任务时长

<EnhancedGanttChart
  tasks={tasks}
  maxTaskDuration={365 * 24 * 60 * 60 * 1000}  // 最大 1 年
/>

禁止跨过周末

<EnhancedGanttChart
  tasks={tasks}
  snapToWeekends={true}    // 自动调整到工作日
  weekendSkip={true}       // 跳过周末
/>

键盘操作

键盘导航

按键	操作
Tab	切换到下一个任务
Shift + Tab	切换到上一个任务
Enter	选中任务并进入编辑
Escape	取消当前操作
Delete	删除选中任务（需确认）

键盘调整

按键	操作
← / →	微调开始/结束时间（1天）
Shift + ← / →	微调开始/结束时间（1周）
Ctrl + ← / →	移动任务（保持时长）

自定义拖拽行为

// 自定义验证函数
const validateDrag = (task, newStart, newEnd) => {
  // 禁止将任务拖到周末
  if (isWeekend(newStart) || isWeekend(newEnd)) {
    return false
  }
  // 禁止拖拽到过去
  if (newStart < new Date()) {
    return false
  }
  return true
}

<EnhancedGanttChart
  tasks={tasks}
  validateDrag={validateDrag}
/>

性能优化

拖拽节流

<EnhancedGanttChart
  tasks={tasks}
  dragThrottle={16}  // 拖拽更新节流（毫秒），默认 16ms（60fps）
/>

禁用动画

<EnhancedGanttChart
  tasks={tasks}
  enableAnimations={false}  // 禁用动画以提升性能
/>

下一步

• 依赖关系 - 任务关联
• 虚拟滚动 - 大数据量优化
• API 参考 - 查看完整属性