一、描述
之前用 vue 写过一个在线的多二维码生成服务,体验地址:https://postbird.gitee.io/vue-online-qrcode/
后面发现二维码多了之后有时候想要排序,需要将比较重要的放在上面或者第一个,因此拖拽排序的需求就出来了。
知道 vue 肯定是有组件存在的,因此就直接搜了搜,找了两个不同的库分别是:
两个库的里面不同,一个是直接进行组件封装,一个是进行指令封装。
二、vuedraggable
vuedraggable
是标准的组件式封装,并且将可拖动元素放进了 transition-group
上面,过渡动画都比较好。
使用方式:
yarn add vuedraggable
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"> <p>{{item}}</p> </div> </transition-group> </vuedraggable> </template> <script> import vuedraggable from 'vuedraggable'; export default { name: 'HelloWorld', components: {vuedraggable}, props: { }, data() { return { list: [1,2,34,4,54,5] } }, updated() { console.log(this.list) }, methods: { } } </script> <style scoped> .wrapper { display: flex; justify-content: center; width: 100%; } .item{ width: 300px; height: 50px; background-color: #42b983; color: #ffffff; } </style>
实现的效果:
官方的示例:
官方的示例 gif:
更多的事件及使用方法请参阅:
三、Awe-dnd
vue-dragging 的 npm 包的名字是 awe-dnd
,并不是 vue-dragging,这个库的特点是封装了 v-dragging
全局指令,然后通过全局指令去数据绑定等。
相比及 vuedraggable 来说, awe-dnd 是没有双向绑定(这里没有双向绑定并不是很严谨,准确的来说没有暴露双向绑定的方式),因此提供了事件,在拖拽结束的时候用来更新列表(不需要手动更新列表,其实内部是实现了双向绑定的)或者是去触发父组件监听的事件。
安装依赖:
npm install awe-dnd --save
yarn add awe-and
使用:
import VueDND from 'awe-dnd' Vue.use(VueDND) <!--your.vue--> <script> export default { data () { return { colors: [{ text: "Aquamarine" }, { text: "Hotpink" }, { text: "Gold" }, { text: "Crimson" }, { text: "Blueviolet" }, { text: "Lightblue" }, { text: "Cornflowerblue" }, { text: "Skyblue" }, { text: "Burlywood" }] } }, /* if your need multi drag mounted: function() { this.colors.forEach((item) => { Vue.set(item, 'isComb', false) }) } */ } </script> <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>
可以发现绑定的时候 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); })
效果: