Vue3 中使用 vuedraggable 实现拖拽排序功能，分组拖拽

Vue3 中使用 vuedraggable 实现拖拽排序功能，分组拖拽

1. 安装draggable

 npm install vuedraggable@next --save

2. 基础用法示例

<template>
  <div class="app-container">
    <draggable 
      v-model="list" 
      item-key="id"
      :group="{ name: 'items' }"
      @end="handleDragEnd"
    >
      <template #item="{ element }">
        <div class="item-card">
          <div class="item-title">{{ element.name }}</div>
          <div class="item-content">{{ element.description }}</div>
        </div>
      </template>
    </draggable>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import draggable from 'vuedraggable';

// 列表数据
const list = ref([
  { id: 1, name: '项目1', description: '描述1' },
  { id: 2, name: '项目2', description: '描述2' },
  { id: 3, name: '项目3', description: '描述3' }
]);

// 拖拽结束事件
const handleDragEnd = (evt) => {
  const { newIndex, oldIndex } = evt;
  console.log('从位置' + oldIndex + '移动到' + newIndex);
};
</script>

<style scoped>
.item-card {
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  padding: 15px;
  margin-bottom: 10px;
  background: #fff;
  cursor: move;
}

.item-title {
  font-weight: bold;
  margin-bottom: 8px;
}

.item-content {
  color: #666;
}
</style>

3. 重要属性说明

• v-model : 绑定数据源
• item-key : 项目的唯一标识
• group : 分组名称，相同组名的可以互相拖拽
• @end : 拖拽结束事件
• @start : 开始拖拽事件
• @change : 顺序改变事件

4. 分组拖拽

<template>
  <div class="group-container">
    <div v-for="group in groups" :key="group.id" class="group">
      <h3>{{ group.name }}</h3>
      <draggable 
        v-model="group.items"
        :group="{ name: 'items' }"
        item-key="id"
        @end="(evt) => handleDragEnd(evt, group)"
      >
        <template #item="{ element }">
          <div class="item-card">
            {{ element.name }}
          </div>
        </template>
      </draggable>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import draggable from 'vuedraggable';

const groups = ref([
  {
    id: 1,
    name: '分组1',
    items: [
      { id: 1, name: '项目1' },
      { id: 2, name: '项目2' }
    ]
  },
  {
    id: 2,
    name: '分组2',
    items: [
      { id: 3, name: '项目3' },
      { id: 4, name: '项目4' }
    ]
  }
]);

const handleDragEnd = (evt, group) => {
  const { newIndex, oldIndex } = evt;
  console.log(`在分组 ${group.name} 中从位置 ${oldIndex} 移动到 ${newIndex}`);
};
</script>

<style scoped>
.group-container {
  display: flex;
  gap: 20px;
}

.group {
  flex: 1;
  padding: 15px;
  background: #f5f7fa;
  border-radius: 4px;
}

.item-card {
  background: white;
  padding: 10px;
  margin: 5px 0;
  border-radius: 4px;
  cursor: move;
}
</style>

5. 注意事项

• 确保每个拖拽项都有唯一的 key
• 使用 @end 事件而不是 @change 事件来处理排序结果
• 如果需要在拖拽时保存滚动位置，可以在 @start 事件中记录位置
• 组件卸载时注意清理相关事件监听

6. 日常整理！