在FormKit Drag-and-Drop中实现分类项拖拽时自动选择子项

FormKit的Drag-and-Drop库提供了一个强大的拖放功能实现，特别适合需要复杂交互的列表操作场景。本文将深入探讨如何在该库中实现一个特殊需求：当用户拖拽分类项时，自动选择并拖拽该分类下的所有子项。

需求背景

在实际应用中，我们经常会遇到需要按类别组织数据的场景。例如，一个食品列表可能包含"水果"和"蔬菜"两个分类，每个分类下又有若干具体项目。用户操作时，希望拖拽分类标题就能同时移动该分类下的所有项目，而不是逐个选择。

实现方案演变

初始方案(v0.1.6)

在早期版本中，可以通过重写multiHandleDragstart回调函数来实现这一功能。核心思路是：

1. 检查当前拖拽的节点是否为分类项
2. 如果是分类项，则遍历后续节点，直到遇到下一个分类项
3. 将这些子节点添加到multiDragState.selectedNodes数组中
4. 调用原始的multiHandleDragstart函数

这种方案虽然可行，但需要直接操作内部状态对象，不够优雅。

改进方案(v0.2.5)

新版本提供了更简洁的API，通过onDragstart回调函数实现相同功能：

1. 在dragAndDrop配置中定义onDragstart处理函数
2. 通过data.draggedNode获取当前拖拽节点
3. 判断节点是否为分类项
4. 遍历后续节点，将符合条件的子节点添加到data.draggedNodes数组

新API更加直观，不需要直接操作内部状态，代码可维护性更好。

关键实现细节

实现这一功能时，有几个关键点需要注意：

1. 节点识别：需要为数据模型添加isCategory字段来标识分类项
2. 排序逻辑：依赖ordinal字段确定节点顺序，确保子项紧跟在分类项后面
3. 边界处理：遍历子项时需要检查是否遇到下一个分类项作为终止条件
4. 视觉反馈：确保添加的节点能正确显示拖拽状态样式

完整示例代码

以下是基于新API的完整实现示例：

const theParentRef = ref<HTMLElement | undefined>(undefined)
const myList = ref<Food[]>([
  { id: 1, ordinal: 5, isCategory: true, name: '水果' },
  { id: 2, ordinal: 6, isCategory: false, name: '苹果' },
  { id: 3, ordinal: 7, isCategory: false, name: '香蕉' },
  { id: 4, ordinal: 8, isCategory: false, name: '橙子' },
  { id: 5, ordinal: 9, isCategory: false, name: '草莓' },
  
  { id: 6, ordinal: 1, isCategory: true, name: '蔬菜' },
  { id: 7, ordinal: 2, isCategory: false, name: '土豆' },
  { id: 8, ordinal: 3, isCategory: false, name: '胡萝卜' },
  { id: 9, ordinal: 4, isCategory: false, name: '生菜' }
])

dragAndDrop<Food>({
  parent: theParentRef,
  values: myList,
  onDragstart(data, state) {
    const node = data.draggedNode.data.value as Food
    if (node.isCategory) {
      const startOrdinal = node.ordinal + 1
      const allNodes = data.parent.data.enabledNodes

      for (let i = startOrdinal; i < allNodes.length; ++i) {
        const currentNode = allNodes[i].data.value as Food
        if (currentNode.isCategory) {
          break
        } else {
          data.draggedNodes.push(allNodes[i])
        }
      }
    }
  },
})

总结

FormKit的Drag-and-Drop库提供了灵活的API来满足各种复杂的拖拽需求。通过合理利用事件回调函数，我们可以实现类似分类项连带拖拽这样的高级交互功能。随着库版本的更新，API设计越来越直观，开发者可以更轻松地实现复杂交互逻辑。