使用vue3实现一个可以上下拖动更换位置的列表,可以用哪些插件或者方法

在Vue3中，可以使用Vue的内置指令v-for来渲染一个列表，并使用Vue的内置指令v-model来绑定列表的数据。要实现可以上下拖动更换位置的列表，可以使用以下插件或方法：

1. Vue DND（拖放）插件：Vue DND是一个用于Vue的拖放插件，可以很方便地实现列表项的拖放排序功能。可以使用npm安装：npm install vue-dnd --save。使用示例：

 

<template>
  <div>
    <div v-for="(item, index) in list" :key="item.id" v-draggable="item">
      {{ item.name }}
    </div>
  </div>
</template>

<script>
import { useDraggable } from 'vue-dnd';

export default {
  setup() {
    const { list } = useDraggable({
      list: [
        { id: 1, name: 'Item 1' },
        { id: 2, name: 'Item 2' },
        { id: 3, name: 'Item 3' },
        { id: 4, name: 'Item 4' },
        { id: 5, name: 'Item 5' }
      ]
    });

    return {
      list
    };
  }
};
</script>

1. Sortable.js库：Sortable.js是一个轻量级的JavaScript库，用于实现可排序列表。可以使用npm安装：npm install sortablejs --save。使用示例：

<template>
  <div>
    <div v-for="(item, index) in list" :key="item.id" ref="listItem">
      {{ item.name }}
    </div>
  </div>
</template>

<script>
import Sortable from 'sortablejs';

export default {
  mounted() {
    const list = this.$refs.listItem;
    new Sortable(list, {
      onEnd: event => {
        const [item] = this.list.splice(event.oldIndex, 1);
        this.list.splice(event.newIndex, 0, item);
      }
    });
  },

  data() {
    return {
      list: [
        { id: 1, name: 'Item 1' },
        { id: 2, name: 'Item 2' },
        { id: 3, name: 'Item 3' },
        { id: 4, name: 'Item 4' },
        { id: 5, name: 'Item 5' }
      ]
    };
  }
};
</script>

以上两种方法都可以实现可以上下拖动更换位置的列表，选择使用哪一种取决于具体需求和个人喜好。