vuedraggable 中文文档: https://www.itxst.com/vue-draggable/tutorial.html
效果展示
实现步骤
-
安装依赖
npm install vuedraggable --save
-
组件中引入
import draggable from "vuedraggable"; components: { draggable, },
-
组件中使用
<template> <div> <draggable v-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>