Quickstart

Install the package vue-draggable-grid via your favourite package manager. Include the library in your project:

javascript

import draggableGrid from "vue-draggable-grid";

// app is created above using createApp(...);

app.use(draggableGrid);

// Now mount your app as usual

An example usage could look like this:

vue

<template>
  <drag-grid v-model="items" :cols="4" :rows="4">
    <template #item="item">
      {{ item.data.text }}
    </template>
  </drag-grid>
</template>

<script setup>
import { ref } from "vue";

const items = ref([
  {
    x: 1,
    y: 3,
    w: 2,
    h: 2,
    key: "item1",
    data: { text: "Hello world 1" },
  },
  {
    x: 2,
    y: 2,
    w: 2,
    h: 1,
    key: "item2",
    data: { text: "Hello world 2" },
  },
  {
    x: 3,
    y: 1,
    w: 1,
    h: 1,
    key: "item3",
    data: { text: "Hello world 3" },
  },
]);
</script>

Quickstart ​

Quickstart