Vue3拖拽排序

### Vue3 拖拽排序实现方法与推荐插件 Vue3 中实现拖拽排序功能可以通过多种方式完成，包括使用第三方插件或手动实现。以下是几种常见的解决方案： #### 1. 使用 SortableJS 和 sortablejs-vue3 SortableJS 是一个非常流行的 JavaScript 库，用于实现拖拽排序功能。`sortablejs-vue3` 是 SortableJS 的 Vue 3 封装版本，提供了简单易用的 API[^1]。通过安装 `sortablejs-vue3`，可以快速实现列表拖拽排序功能。 ```bash npm install sortablejs-vue3 ``` 在项目中使用时，可以按照以下代码示例进行配置： ```vue <template> <div> <ul v-sortable:options="sortableOptions"> <li v-for="(item, index) in items" :key="index">{{ item }}</li> </ul> </div> </template> <script> import { defineComponent } from "vue"; import Sortable from "sortablejs"; export default defineComponent({ data() { return { items: ["Item 1", "Item 2", "Item 3", "Item 4"], sortableOptions: { onEnd: (evt) => { const oldIndex = evt.oldIndex; const newIndex = evt.newIndex; this.items.splice(newIndex, 0, this.items.splice(oldIndex, 1)[0]); }, }, }; }, }); </script> ``` #### 2. 使用 Vue.Draggable.next `Vue.Draggable.next` 是基于 `vuedraggable` 的 Vue 3 版本，支持拖拽排序功能，并且兼容 PC 和移动端[^2]。它允许用户通过拖拽改变列表项的顺序，并且支持动画效果。 安装命令如下： ```bash npm install vuedraggable@next ``` 使用示例： ```vue <template> <draggable v-model="items" @end="onDragEnd"> <transition-group> <div v-for="(item, index) in items" :key="index">{{ item }}</div> </transition-group> </draggable> </template> <script> import draggable from "vuedraggable"; export default { components: { draggable }, data() { return { items: ["Item 1", "Item 2", "Item 3", "Item 4"], }; }, methods: { onDragEnd(evt) { console.log("拖拽结束", evt); }, }, }; </script> ``` #### 3. 使用 VueSlicksort `VueSlicksort` 是另一个轻量级的拖拽排序组件，支持 Vue 3，并且提供了流畅的用户体验[^3]。它可以轻松地与 Vue 的响应式系统集成。 安装命令： ```bash npm install vue-slicksort ``` 使用示例： ```vue <template> <div class="slicksort-wrap"> <SlickList lockAxis="y" v-model="items" @input="getChangeLists"> <SlickItem v-for="(item, index) in items" :index="index" :key="index"> {{ item }} </SlickItem> </SlickList> </div> </template> <script> import { SlickList, SlickItem } from "vue-slicksort"; export default { components: { SlickList, SlickItem }, data() { return { items: ["Item 1", "Item 2", "Item 3", "Item 4"], }; }, methods: { getChangeLists(vals) { console.log("新的顺序", vals); }, }, }; </script> ``` #### 手动实现拖拽排序 如果不想依赖第三方库，也可以手动实现拖拽排序功能。这需要监听鼠标事件（如 `mousedown`、`mousemove` 和 `mouseup`），并动态调整 DOM 元素的位置。虽然这种方法灵活性更高，但开发成本较大，且需要处理跨浏览器兼容性问题。 --- ### 总结 对于 Vue3 项目中的拖拽排序功能，推荐优先使用成熟的第三方插件，如 `sortablejs-vue3` 或 `vuedraggable@next`，它们提供了完善的 API 和良好的用户体验。如果需要更轻量化的解决方案，可以考虑 `VueSlicksort`。 ---