Awe-dnd
Makes your elements draggable in Vue.
See Demo: http://hilongjw.github.io/vue-dragging/
Some of goals of this project worth noting include:
- support desktop and mobile
- Vue data-driven philosophy
- support multi comb drag
- Supports both of Vue 1.0 and Vue 2.0
Requirements
- Vue: ^1.0.0 or ^2.0.0
Install
From npm:
$ npm install awe-dnd --save Usage
//main.js 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>API
v-dragging="{ item: color, list: colors, group: 'color' }"
Arguments:
{item} Object{list} Array{group} String{comb} String
group is unique key of dragable list.
comb use for multi drag
Example
<!-- Vue2.0 --> <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> <!-- Vue1.0 --> <div class="color-list"> <div class="color-item" v-for="color in colors" v-dragging="{ item: color, list: colors, group: 'color', key: color.text }" track-by="text" >{{color.text}}</div> </div>Event
<div class="color-list"> <div class="color-item" v-for="color in colors" v-dragging="{ item: color, list: colors, group: 'color', otherData: otherData, comb: 'isComb' }" :key="color.text" >{{color.text}}</div> </div>export default { mounted () { this.$dragging.$on('dragged', ({ value }) => { console.log(value.item) console.log(value.list) console.log(value.otherData) }) this.$dragging.$on('dragend', () => { }) } }
