vue-dragula

👌 Drag and drop so simple it hurts

Vue wrapper for dragula.

install

npm install vue-dragula

Usage

script:

var Vue = require('vue');
var VueDragula = require('vue-dragula');

Vue.use(VueDragula);

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>

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:

• name the name that identifies the bag
• drake the raw drake instance

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])
    })
  }
})

Special Events for vue-dragula

Event Name	Listener Arguments	Event Description
dropModel	bagName, el, target, source	same as normal drop, but model was synced
removeModel	bagName, el, container	same as normal remove, but model was synced