Vue.js 3中如何用v-for按类别拆分可拖拽网格元素？

问题原因分析 #

你遇到的索引异常，核心问题出在全局索引与类别边界的冲突：

1. 遍历类别数组生成统一列表时，draggable 默认以整个列表的全局索引处理拖拽逻辑，但分隔符和不同类别的元素混在一起，组件无法自动识别类别边界，拖拽第二个类别的元素时，索引计算错误会波及第一个类别的元素位置。
2. 若未给每个可拖拽项设置唯一且稳定的 key，Vue 虚拟 DOM 的复用机制会加剧索引混乱，拖拽后元素真实位置与虚拟 DOM 映射错位。
3. 未对分隔符做拖拽过滤，可能导致分隔符被误拖拽，打乱整个列表的类别结构，引发索引连锁错误。

最优解决方案 #

1. 重构数据结构：生成包含分隔符的扁平列表 #

用计算属性自动整合类别分隔符与对应元素，生成统一数组：

// 假设已有 categories（类别数组）和 items（元素数组）
const mergedList = computed(() => {
  let result = []
  categories.forEach(category => {
    // 添加带唯一标识的类别分隔符
    result.push({ 
      id: `sep-${category.id}`,
      type: 'separator', 
      label: category.name 
    })
    // 追加当前类别的所有元素
    result.push(...items.filter(item => item.categoryId === category.id))
  })
  return result
})

2. 配置 draggable 组件：过滤分隔符 + 绑定唯一 key #

使用单个 draggable 容器，禁止分隔符拖拽，同时给每个项绑定唯一 key：

<draggable
  v-model="mergedList"
  item-key="id"
  :filter=".category-separator"
  :prevent-on-filter="true"
  @end="handleDragEnd"
  @move="handleMove" <!-- 可选：限制同类别拖拽 -->
>
  <template #item="{ element }">
    <!-- 类别分隔符 -->
    <div v-if="element.type === 'separator'" class="category-separator">
      {{ element.label }}
    </div>
    <!-- 网格元素 -->
    <div v-else class="grid-item">
      <!-- 元素内容，例如 {{ element.name }} -->
    </div>
  </template>
</draggable>

配套 CSS 标记分隔符：

.category-separator {
  background: #f5f5f5;
  padding: 8px;
  font-weight: bold;
}

3. 处理拖拽事件：维护类别结构与索引正确性 #

可选：限制元素仅在同类别内拖拽

如果不需要跨类别拖拽，在 move 事件中做类别校验：

const handleMove = (evt) => {
  const draggedItem = evt.draggedContext.element
  const targetItem = evt.targetContext.element

  // 禁止拖到分隔符上
  if (targetItem.type === 'separator') return false
  
  // 仅允许同类别内拖拽
  const draggedCategory = categories.find(c => c.id === draggedItem.categoryId)
  const targetCategory = categories.find(c => c.id === targetItem.categoryId)
  return draggedCategory.id === targetCategory.id
}

跨类别拖拽场景：强制维护分隔符位置

允许跨类别拖拽时，在拖拽结束后更新元素的类别归属，确保分隔符始终在类别开头：

const handleDragEnd = (evt) => {
  const { newIndex } = evt
  const movedItem = mergedList.value[newIndex]

  // 忽略分隔符的移动
  if (movedItem.type === 'separator') return

  // 找到新位置所属的类别（向前查找最近的分隔符）
  let targetCategory = null
  for (let i = newIndex - 1; i >= 0; i--) {
    const item = mergedList.value[i]
    if (item.type === 'separator') {
      targetCategory = categories.find(c => c.name === item.label)
      break
    }
  }

  // 更新元素的类别ID，触发计算属性重新生成列表
  if (targetCategory) {
    const originalItem = items.value.find(item => item.id === movedItem.id)
    if (originalItem) originalItem.categoryId = targetCategory.id
  }
}

4. 替代方案：嵌套 draggable（严格类别隔离） #

如果每个类别需要完全独立的拖拽区域，可采用嵌套结构：外层遍历类别，内层每个类别单独使用 draggable，确保每个类别内的索引独立，不会互相干扰：

<div v-for="category in categories" :key="category.id" class="category-group">
  <div class="category-separator">{{ category.name }}</div>
  <draggable
    v-model="items.filter(item => item.categoryId === category.id)"
    item-key="id"
    class="grid-container"
  >
    <template #item="{ element }">
      <div class="grid-item">{{ element.name }}</div>
    </template>
  </draggable>
</div>

这种写法没有重复代码问题，外层单个 v-for 遍历类别，内层 draggable 复用模板，同时彻底避免跨类别索引异常。

内容的提问来源于stack exchange，提问作者Vueer