vue中如何实现拖拽调整顺序功能
作者：树洞菇凉
这篇文章主要介绍了vue中如何实现拖拽调整顺序功能问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
vue实现拖拽调整顺序功能
使用vuedraggable是标准的组件式封装
或 vue-dragging 指令方式 实现拖拽调整顺序功能。
1：安装依赖
npm install vuedraggable
或
yarn add vuedraggable
2：使用全局注册 或者 哪个页面使用就引入哪个页面也可。
import vuedraggable from 'vuedraggable'
在使用时，可通过 v-model 来双向绑定本地 data，如果需要更新或者是触发父组件监听的事件，可以在 updated() 中去 emit。
引入后直接声明该组件然后使用即可，示例代码：
<template>
<vuedraggable class="wrapper" v-model="list">
<transition-group>
<div v-for="item in list" :key="item" class="item">{{item}}</div>
</transition-group>
</vuedraggable>
</template>
<script>
import vuedraggable from 'vuedraggable';
export default {
name: 'Index',
components: {
vuedraggable
},
props: {},
data() {
return {
list: [1,2,34,4,54,5]
}
},
updated() {
console.log(this.list)
},
methods: {
}
}
</script>
<style scoped lang="scss">
.wrapper {
display: flex;
justify-content: center;
width: 100%;
.item{
width: 300px;
height: 50px;
background-color: #42b983;
color: #ffffff;
}
}
</style>vue-dragging的npm包的名字是awe-dnd
并不是 vue-dragging，这个库的特点是封装了 v-dragging 全局指令，然后通过全局指令去数据绑定等。
与vuedraggable相比，awe-dnd没有双向绑定，因此提供了事件，在拖拽结束时用来更新列表 或 去触发父组件监听的事件。
1：安装依赖
npm install awe-dnd --save
或
yarn add awe-and
项目中main.js 文件
import VueDND from 'awe-dnd'
Vue.use(VueDND);
<template>
<div class="color-list">
<div
class="color-item"
v-for="color in colors" v-dragging="{ item: color, list: colors, group: 'color' }"
:key="color.text"
>{{color.text}}</div>
</div>
</template>
<script>
export default {
data () {
return {
colors: [{
text: "Aquamarine"
}, {
text: "Hotpink"
}, {
text: "Gold"
}, {
text: "Crimson"
}, {
text: "Blueviolet"
}, {
text: "Lightblue"
}, {
text: "Cornflowerblue"
}, {
text: "Skyblue"
}, {
text: "Burlywood"
}]
}
},
}
</script>可以发现绑定时 v-dragging="{ item: color, list: colors, group: 'color' }" 这种形式进行指令绑定，其中 item 就是单个对象，而 list 则是数据列表，group 则是用来声明一个组，来保证可以在一个页面中进行多个数据源的操作。
而提供的两个事件方法如下：
export default {
mounted () {
this.$dragging.$on('dragged', ({ value }) => {
console.log(value.item)
console.log(value.list)
console.log(value.otherData)
})
this.$dragging.$on('dragend', (res) => {
console.error(res);
})
}
}一般使用的方法就是：
this.$dragging.$on('dragend', (res) => {
console.error(res);
})vue拖拽排序功能（vuedraggable）
vuedraggable 中文文档： https://www.itxst.com/vue-draggable/tutorial.html
效果展示
实现步骤
1.安装依赖
npm install vuedraggable --save
2.组件中引入
import draggable from "vuedraggable";
components: {
draggable,
},3.组件中使用
<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>总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。