vue.draggable.next vue3的拖拽插件介绍

Vue.Draggable 是一款基于 Vue.js 和 Sortable.js 的拖拽组件，可以用来创建可拖拽的列表。Vue.Draggable 支持 Vue 2 和 Vue 3。

在 Vue 3 中使用 Vue.Draggable.next，首先需要安装：

npm install vuedraggable@next

然后在 Vue 3 的组件中使用它：

<template>
  <draggable v-model="list" class="drag-container">
    <div v-for="item in list" :key="item.id" class="drag-item">
      {{ item.name }}
    </div>
  </draggable>
</template>
 
<script>
import { ref } from 'vue';
import draggable from 'vuedraggable';
 
export default {
  components: {
    draggable,
  },
  setup() {
    const list = ref([
      { id: 1, name: 'Item 1' },
      { id: 2, name: 'Item 2' },
      { id: 3, name: 'Item 3' },
      // ...
    ]);
 
    return {
      list,
    };
  },
};
</script>
 
<style>
.drag-container {
  display: flex;
  cursor: move;
}
.drag-item {
  margin: 5px;
  padding: 10px;
  background-color: #f9f9f9;
  border: 1px solid #eee;
}
</style>

在这个例子中，draggable 组件的 v-model 绑定了一个响应式的列表 list。用户可以拖动列表中的项来重新排序。每个 .drag-item 都是可拖动的。