使用 vuedraggable 实现拖拽排序功能
效果展示实现步骤vuedraggable 中文文档: /vue-draggable/tutorial.html
效果展示
实现步骤
安装依赖
npm install vuedraggable --save
组件中引入
import draggable from "vuedraggable";components: {draggable,},
组件中使用
<template><div><draggablev-model="myArray"group="people"@change="change"@start="start"@end="end"><div class="item" v-for="(itme, index) in myArray" :key="index">{{ itme }}</div></draggable></div></template><script>import draggable from "vuedraggable";export default {components: {draggable,},data() {return {myArray: ["行一", "行二", "行三"],};},methods: {// 监听拖拽change(event) {console.log("change");console.log(event);console.log(this.myArray);},// 开始拖拽start(event) {console.log("start");console.log(event);console.log(this.myArray);},// 结束拖拽end(event) {console.log("end");// event.item 拖拽的本身// event.to拖拽的目标列表// event.from 拖拽之前的列表// event.oldIndex 拖拽前的位置// event.newIndex 拖拽后的位置console.log(event);console.log(this.myArray);},},};</script><style>.item {border: 1px solid #bbb;margin: 10px;width: 100px;padding: 5px;}</style>