在 Vue.js 中实现拖拽排序功能,可以使用现成的库来简化开发过程。以下是几种推荐的方法:
-
使用
vuedraggable
库:
vuedraggable
是一个基于Sortable.js
的 Vue 组件,它提供了简单易用的 API 来创建可拖拽和排序的列表。这是最流行的选择之一。安装:
npm install vuedraggable
使用:
<template> <draggable v-model="items" @end="onDragEnd"> <div v-for="(item, index) in items" :key="index">{ { item }}</div> </draggable> </template> <script> import draggable from 'vuedraggable' export default { components: { draggable, }, data() { return { items: [/* 列表项 */], } }, methods: { onDragEnd(event) { // 拖拽结束时触发 console.log('拖拽结束', event) } } } &