Skip to content
master
Go to file
Code

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
 
 
src
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

README.md

vue-dragula

👌 Drag and drop so simple it hurts

Vue wrapper for dragula.

Install

CommonJS

  • Available through npm as vue-dragula.

    npm install vue-dragula
    var 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:

  • 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, dropIndex model was synced, dropIndex exposed
removeModel bagName, el, container, removeIndex model was synced, removeIndex exposed
You can’t perform that action at this time.