如何使用VueDraggable在Vue3中自动更新项的order字段？

实现步骤 #

1. 基础组件配置
   在Vue组件中引入vue.draggable.next，通过v-model绑定数据数组，同时监听拖拽结束的@end事件：

<template>
  <draggable v-model="items" @end="updateItemOrders">
    <div v-for="item in items" :key="item.name" class="draggable-item">
      {{ item.name }} - 排序值：{{ item.order }}
    </div>
  </draggable>
</template>

2. 编写拖拽回调逻辑
   在Vue3的setup语法中定义处理函数，拖拽完成后遍历数组，将每个元素的order字段更新为当前数组索引：

<script setup>
import { ref } from 'vue'
import draggable from 'vue.draggable.next'

// 初始化数据
const items = ref([
  { name: "Test - 1", order: 0 },
  { name: "Test - 2", order: 1 },
  { name: "Test - 3", order: 2 }
])

// 拖拽结束后更新order字段
const updateItemOrders = () => {
  items.value.forEach((item, index) => {
    item.order = index
  })
}
</script>

原理说明 #

vue.draggable.next在拖拽时会直接修改v-model绑定数组的顺序，但不会自动同步元素内部的order字段。在拖拽结束的回调里遍历数组，将每个元素的order设为当前索引，就能让order值和数组的实际排序完全匹配。如果需要将更新后的排序提交到后端，直接在updateItemOrders函数里调用后端接口即可。

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