Skip to content

Astray-git/vue-dragula

master
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Code

Files

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

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