vue-dragula

Features

• simple nested drag and drops
• multiple dragula instances automatically
• Vue.js keeps track of all changes

Installation

Either do:

bower install vue-dragula

or download the scripts and include them in your project.

Usage

Include vue-dragula after Vue.js and dragula:

<script src="path/to/vue.js"></script>
<script src="path/to/dragula.js"></script>
<script src="bower_components/vue-dragula/vue-dragula.min.js"></script>

---

Make your Vue.js components draggable by initializing with this and an options-object, which can contain a handle and a direction, e.g.:

Vue.component('dnd-board', {
    props: ['id'],
    template: '#dnd-board',
    ready: function() {
        Vue.dnd.initialize(this, {handle: 'class-of-handle', direction: 'horizontal'});
    },
    beforeDestroy: function () {
        Vue.dnd.destroy(this);
    }
});

• To pass the class of a handle or a direction parameter are optional.
• The direction could be 'horizontal' or 'vertical'.
• The default direction is 'vertical'.
• In the above example child-elements of the component 'dnd-board' will be draggable.

---

You have to make sure the component (e.g. 'dnd-board') has an id representing its draggable children's position in the Vue instance's data object, e.g.:

<dnd-board v-cloak id="lists">
    <div class="column" v-for="list in lists">
        <h2 class="dnd-lists-handle">
            {{list.title}}
        </h2>
        <dnd-row v-cloak :id="'lists-' + $index + '-todos'" :list="list">
            <div class="card" v-for="todo in list.todos">
                {{todo.title}}
            </div>
        </dnd-row>
    </div>
</dnd-board>
<dnd-item v-cloak :id="'lists-' + $index + '-todos'"></dnd-item>

When the Vue instance's data object is:

data: {
    lists: [
        {
            title: 'Todo',
            todos: [
                {title: 'code'},
                {title: 'eat'},
                {title: 'sleep'},
                {title: 'repeat'}
            ]
        },
        {
            title: 'Todo',
            todos: [
                {title: 'code'},
                {title: 'eat'},
                {title: 'sleep'},
                {title: 'repeat'}
            ]
        },
        {
            title: 'Todo',
            todos: [
                {title: 'code'},
                {title: 'eat'},
                {title: 'sleep'},
                {title: 'repeat'}
            ]
        }
    ]
}

---

If you have any questions or feedback feel free to open an issue :)