vue-dragula
:ok_hand: Drag and drop so simple it hurts
Vue wrapper for [dragula][1].
Install
CommonJS
-
Available through npm as
vue-dragula.npm install vue-dragulavar Vue = require('vue'); var VueDragula = require('vue-dragula'); Vue.use(VueDragula);
Direct include
- You can also directly include it with a
<script>tag when you have Vue and dragula already included globally. It will automatically install itself.
Usage
template:
<div class="wrapper">
<div class="container" v-dragula="colOne" bag="first-bag">
<!-- with click -->
<div v-for="text in colOne" @click="onClick">{{text}} [click me]</div>
</div>
<div class="container" v-dragula="colTwo" bag="first-bag">
<div v-for="text in colTwo">{{text}}</div>
</div>
</div>
NOTE Vuejs 2.x
To make sure a correct update for DOM element order, we must provide a key for v-for directive inside a dragula container. https://vuejs.org/v2/guide/list.html#key
With v-for="item in list", we need :key="item.id" for object items, :key="item" for plain string.
APIs
You can access them from Vue.vueDragula
options(name, options)
Set dragula options, refer to: https://github.com/bevacqua/dragula#optionscontainers
...
new Vue({
...
created: function () {
Vue.vueDragula.options('my-bag', {
direction: 'vertical'
})
}
})
find(name)
Returns the bag for a drake instance. Contains the following properties:
namethe name that identifies the bagdrakethe rawdrakeinstance
Events
For drake events, refer to: https://github.com/bevacqua/dragula#drakeon-events
...
new Vue({
ready: function () {
Vue.vueDragula.eventBus.$on('drop', function (args) {
console.log('drop: ' + args[0])
})
}
})