使用 vuedraggable 插件实现拖拽排序功能
项目本地安装vuedraggable插件
npm install vuedraggable --save
安装成功后在package.json文件中会显示
具体的代码实现
<template>
<div class="content">
<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 lang="less" scoped>
.content {
display: flex;
justify-content: center;
align-items: center;
margin-top: 50px;
.item {
border: 1px solid #bbb;
margin: 20px 0;
width: 100px;
padding: 5px;
text-align: center;
}
}
</style>
点击实现拖拽