A description
Before generation service experience with vue address written a line of multi-dimensional code: https://postbird.gitee.io/vue-online-qrcode/
After more than a two-dimensional code later found to sometimes want to sort needs to be more important or first on top, so drag the sort of demand came out.
Vue I know there is definitely a component exists, so the direct search, search, find two different libraries are:
Which two different libraries, is a direct component package, a package is instruction.
二、vuedraggable
vuedraggable Is a standard component package, and draggable into the transition-group above, transitions better.
Use:
yarn add vuedraggable
import vuedraggable from 'vuedraggable';When in use, you can v-model , if you need to update or triggering the parent component monitor events, can be two-way binding local data updated() go in emit.
Declared directly after introduction of the assembly can then use the sample code:
<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> The effect of implementation:
The official Example:
The official example gif:
More events and how to use see:
三、Awe-dnd
vue-dragging name npm package is awe-dndnot vue-dragging, the characteristics of this library is to encapsulate the v-dragging global instruction, then go through the global data binding command or the like.
Vuedraggable and compared it, awe-dnd is no way binding (there is no way binding is not very precise and accurate two-way binding is not exposed to it), thus providing an event at the end of the drag used to update the list (no need to manually update the list, in fact, the interior is to achieve a two-way binding) or event to trigger the parent component is listening.
Installation depends:
npm install awe-dnd --save
yarn add awe-anduse:
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>Binding can be found when v-dragging="{ item: color, list: colors, group: 'color' }" such a bound form of an instruction, wherein the item is a single object, and the list is a list of data, group is used to declare a set, to ensure that the plurality of data sources may be a page in operation .
The method provides the following two events:
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); }) } }Commonly used method is:
this.$dragging.$on('dragend', (res) => { console.error(res); })effect:
