zero-dnd
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
- 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"
}]
}
}
}
</script>
<template>
<div class="color-list" v-dragevent="{ group: 'color', list: colors}">
<div
class="color-item"
v-for="color in colors" v-dragging="{ item: color, group: 'color' }"
:key="color.text"
>{{color.text}}</div>
</div>
</template>
API
v-dragging="{ item: color, group: 'color' }"
v-dragevent="{ group: 'color', list: colors, dragged: handleDragged, dragend: handleDragend }"
Arguments:
{item} Object require
{list} Array require
{group} String require
{dragged} Function
{dragend} Function
group
is unique key of dragable list.
dragged
is dragged event function.
dragend
is dragend event function.
Example
<!-- Vue2.0 -->
<div class="color-list" v-dragevent="{ group: 'color', list: colors}">
<div
class="color-item"
v-for="color in colors" v-dragging="{ item: color, group: 'color' }"
:key="color.text"
>{{color.text}}</div>
</div>
<!-- Vue1.0 -->
<div class="color-list" v-dragevent="{ group: 'color', list: colors}">
<div
class="color-item"
v-for="color in colors" v-dragging="{ item: color, group: 'color', key: color.text }"
track-by="text"
>{{color.text}}</div>
</div>
Event
<div class="color-list" v-dragevent="{ group: 'color', list: colors, dragged: handleDragged, dragend: handleDragend }">
<div
class="color-item"
v-for="color in colors" v-dragging="{ item: color, group: 'color', otherData: otherData }"
:key="color.text"
>{{color.text}}</div>
</div>
export default {
methods: {
handleDragged: function(data) {
console.log('dragged', data)
},
handleDragend: function(data) {
console.log('dragend', data)
}
}
}
License
Dependencies
babel-cli: ^6.26.0babel-polyfill: ^6.26.0babel-preset-es2015: ^6.24.1babel-preset-es2015-rollup: ^3.0.0chai: ^4.1.2cz-conventional-changelog: ^2.1.0ghooks: ^2.0.0karma: ^1.7.1karma-mocha: ^1.3.0karma-phantomjs-launcher: ^1.0.4karma-rollup-plugin: ^0.2.4karma-sinon-chai: ^1.3.3karma-spec-reporter: ^0.0.31mocha: ^4.0.1rollup: ^0.51.3rollup-plugin-babel: ^3.0.2rollup-plugin-replace: ^2.0.0rollup-watch: ^4.3.1sinon: ^4.1.2sinon-chai: ^2.14.0validate-commit-msg: ^2.14.0vue: ^2.5.3vue-router: ^3.0.1