Vue3 Draggable-Next 拖拽组件完整示例

首先需要安装 draggable-next，可以使用以下命令进行安装：

npm install draggable-next

然后在 Vue 组件中引入 draggable-next：

import draggable from 'vuedraggable'

接下来就可以在 Vue 组件中使用 draggable 了，以下是一个完整的示例：

<template>
  <div>
    <draggable v-model='list'>
      <div v-for='item in list' :key='item.id'>{{item.name}}</div>
    </draggable>
  </div>
</template>

<script>
import draggable from 'vuedraggable'

export default {
  name: 'MyComponent',
  components: {
    draggable
  },
  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>

以上示例中，我们使用 v-model 来绑定 list 数据，然后在 draggable 组件中使用 v-for 遍历 list 生成列表项。通过以上代码，我们就可以实现一个简单的可拖拽列表了。