👌 Drag and drop so simple it hurts

Vue wrapper for dragula.

• Available through npm as vue-dragula.

  npm install vue-dragula

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

• You can also directly include it with a <script> tag when you have Vue and dragula already included globally. It will automatically install itself.

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>

You can access them from Vue.vueDragula

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

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

Returns the drake instance according the given name of a bag.

For drake events, refer to: https://github.com/bevacqua/dragula#drakeon-events

... new Vue({ mounted: function () { Vue.vueDragula.eventBus.$on('drop', function (args) { console.log('drop: ' + args[0]) }) } })

| Event Name | Listener Arguments | | :-------------: |:-------------:| -----| | drop-model | bagName, el, dropTarget, dropSource, dropIndex | | remove-model | bagName, el, dropTarget, dropSource, dropIndex |

dropTarget, dropSource, properties:

• el: the DOM element
• model: updated model
• expression: the expression for directive

A sample function to update model on events:

function updateModel (vm, dropTarget, dropSource) { vm[dropSource.expression] = dropSource.model if (dropTarget.el === dropSource.el) { return } vm[dropTarget.expression] = dropTarget.model }