draggable 排序@end=“dragEnd“

draggable插件中的 @end="dragEnd"用法更新数据

当使用draggable插件进行拖拽排序时，@end="dragEnd"可以用于更新数据。实现方式是在dragEnd方法中获取拖拽后的排序信息，然后更新数据源。

<template>
  <div>
    <h3>拖拽排序列表</h3>
    <draggable v-model="items" @end="dragEnd">
      <div v-for="(item, index) in items" :key="item.id">
        {
   
   { item.name }}
      </div>
    </draggable>
  </div>
</template>

<script>
import draggable from "vuedraggable";

export default {
  components: {
    draggable,
  },
  data() {
    return {
      items: [
        { id: 1, name: "apple" },
        { id: 2, name: "banana" },
        { id: 3, name: "cherry" },
      ],
    };
  },
  methods: {
    dragEnd(event) {
      //获取拖拽后数据的排序，更新数据源
      const newItems = event.newContainer.children.map((item, index) => {
        return { ...item.item, order: index + 1 };
      });
      this.items = newItems;
    },
  },
};
</script>

在上面的例子中，我们在dragEnd方法中获取了拖拽后的数据排序，然后重新将数据赋值给items，实现了数据的更新。