Package Exports
- awe-dnd
This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (awe-dnd) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.
Readme
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', () => {
})
}
}