如何用Vue.Draggable实现Vue2+Vuetify二维网格拖拽排序？

问题场景 #

你用Vue2搭配Vuetify构建了按钮组成的二维网格，初始代码如下：

<v-row>
  <v-col cols="6" v-for="item in itemList" :key="item.id">
    <v-btn color="black--text">
      {{ item.text }}
    </v-btn>
  </v-col>
</v-row>

尝试用Vue.Draggable实现拖拽重排时，错误地将draggable放在每个v-col内部：

<v-row>
  <v-col cols="6" v-for="item in itemList" :key="item.id">
    <draggable v-model="itemList" group="myGroup">
      <v-btn color="black--text">
        {{ item.text }}
      </v-btn>
    </draggable>
  </v-col>
</v-row>

导致出现以下问题：

• 拖拽按钮时首个按钮消失，空位填充延迟
• 过渡效果生硬
• 将draggable移到v-row外时，整个网格变成单个拖拽单元
  你希望实现Sortable官网展示的网格拖拽效果，但找不到对应示例代码，同时难以找到Sortable/Vue.Draggable的完善资料。

解决方案 #

1. 纠正draggable的包裹范围 #

Vue.Draggable需要包裹整个列表容器，而非单个列表项。将draggable放在v-row外层，同时通过sortable-options配置Sortable的网格参数，实现单元格级别的拖拽：

首先确保已安装对应版本的Vue.Draggable（Vue2需指定适配版本）：

npm install vuedraggable@2.24.3

组件内导入并使用：

<template>
  <draggable 
    v-model="itemList" 
    :sortable-options="{ 
      grid: [20, 20], // 网格步长，根据布局间距调整单位为px
      animation: 150, // 过渡动画时长，优化生硬问题
      handle: '.v-btn' // 可选：指定仅按钮区域可触发拖拽
    }"
  >
    <v-row>
      <v-col cols="6" v-for="item in itemList" :key="item.id">
        <v-btn color="black--text">
          {{ item.text }}
        </v-btn>
      </v-col>
    </v-row>
  </draggable>
</template>

<script>
import draggable from 'vuedraggable'

export default {
  components: { draggable },
  data() {
    return {
      itemList: [
        { id: 1, text: '按钮1' },
        { id: 2, text: '按钮2' },
        { id: 3, text: '按钮3' },
        { id: 4, text: '按钮4' }
      ]
    }
  }
}
</script>

配置说明 #

• grid：设置拖拽时的网格对齐步长，数值对应px单位，匹配布局间距即可实现官网级别的网格拖拽效果
• animation：设置拖拽过渡动画时长，直接解决过渡生硬的问题
• handle：可选配置，指定仅点击按钮时触发拖拽，避免误触布局区域

之前的错误在于每个列表项都独立包裹draggable，导致每个按钮都是单独的拖拽实例，数据绑定逻辑混乱，从而出现按钮消失、填充延迟的问题。

文档参考建议 #

• Vue.Draggable是Sortable的Vue封装，所有Sortable的配置参数都可通过sortable-options传递，核心参数直接参考Sortable的GitHub README即可
• 若需要场景化示例代码，可查看Vue.Draggable仓库的examples目录，里面包含Vue2的各类拖拽场景示例，包括网格拖拽
• 虽然Sortable的Wiki内容零散，但核心功能的配置都在README中有明确说明，结合实际布局调试参数即可满足需求

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