dragula-vue3

Vue 3 components for working with the dragula library.

---

Install

npm install --save dragula-vue3

Setup

import { createApp } from "vue";
import App from "./App.vue";

import DragulaVue from "dragula-vue";

const app = createApp(App);
app.use(DragulaVue);
app.mount("#app");

Usage

<template>
    <dragula-container
        v-model="listsObj"
        :item-key-func="(item) => `${item.id}`"
        @drop="onDrop"
        @remove="onRemove"
        class="container"
        v-slot="{ listKeys }"
    >
        <dragula-list
            v-for="key in listKeys"
            :key="key"
            :list-key="key"
            class="list"
            v-slot="{ listItems }"
        >
            <dragula-list-item
                v-for="item in listItems"
                :key="item.id"
                :list-item="item"
                class="list-item"
                v-slot="{ listItem }"
            >
                {{ listItem.title }}
            </dragula-list-item>
        </dragula-list>
    </dragula-container>
</template>

<script>
export default {
    data() {
        return {
            listsObj: {
                todo: [
                    { id: 1, title: "Do 1" },
                    { id: 2, title: "Do 2" },
                ],
                done: [
                    { id: 3, title: "Done 3" },
                    { id: 4, title: "Done 4" },
                ],
            },
        };
    },
    methods: {
        onDrop({ sourceKey, targetKey, listItem }) {
            console.log(sourceKey, targetKey, listItem);
        },
        onRemove({ sourceKey, listItem }) {
            console.log(sourceKey, listItem);
        },
    },
};
</script>

<style scoped>
.container {
    display: flex;
    gap: 10px;
    margin: 20px;
}
.list {
    background: #ccc;
    padding: 20px;
}
.list-item {
    background: lavender;
    border: 1px solid black;
    padding: 5px;
    margin-bottom: 5px;
}
</style>

Components

DragulaContainer

It is the wrapper component representing the container in which the dragula lists reside. It accepts an object representing all the lists inside the container and keeps it in sync using v-model prop. It exposes the default scoped slot with listKeys, which is an array of the keys of the object passed to v-model, which can be used to loop over and construct a DragulaList for every list in the passed object (as shown in the usage example).

Props

Name	Type	Desctiption
v-model	Object (Required)	Object containing all the lists for a dragula container.
itemKeyFunc	Function: (item) => String (Required)	Function to get the key for each list item. Make sure this function returns a String, and is unique among list items in all the arrays for a container; not just the initial one where they reside
options	Object	Options used by the underlying dragula library. Look up the dragula documentation for a list of all options and their description.
tag	String	The html tag of the container element. Defaults to div

DragulaList

It represents an inidvidual list in a container. It accepts a listKey prop, which corresponds to a list for that key in the object passed to DragulaContainer, and exposes the default scoped slot with listItems, which is the list for that key, and is used to construct a DragulaListItem for items in that list (as shown in the usage example).

Props

Name	Type	Desctiption
listKey	String (Required)	key for a specific item list in the object passed to DragulaContainer
tag	String	The html tag of the list element. Defaults to div

DragulaListItem

It represents an individual item in a list inside a container. It accepts a 'listItem' prop, and just exposes it in the default scoped slot(as shown in the usage example).

Name	Type	Desctiption
listItem	Any (Required)	The list item data.
tag	String	The html tag of the list item element. Defaults to div

Events

The DragulaContainer component emits the following events:

Name	Args	Description
drop	Object: { sourceKey, targetKey, listItem }	Fired after syncing v-model when an element is dragged from one list and dropped to another list or is reordered within the same list.
remove	Object: { sourceKey, listItem }	Fired after syncing v-model when an element is removed from the dragula container.

Dragula instance

The underlying dragula instance can be accessed from DragulaContainer component using its $drake property. It will be null before the DragulaContainer component mounts and dragula is initialized.

Look up the dragula documentation for using the drake instance.

<template>
    <dragula-container ... ref="dragulaContainer"> ... </dragula-container>
</template>

<script>
export default {
   ...
    methods: {
      getDrakeInstance() {
        return this.$refs.dragulaContainer.$drake;
      }
    },
};
</script>