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>

Options

Set dragula options, refer to: https://github.com/bevacqua/dragula#optionscontainers

...
new Vue({
  ...
  created: function () {
    Vue.vueDragula.options('my-bag', {
      direction: 'vertical'
    })
  }
})

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