Vue Draggable Grid

A library for Vue2 which allows drag&drop functionality in a grid context.

Installation

npm install vue-draggable-grid

Usage

Include the library in your project:

import draggableGrid from "vue-draggable-grid";

Vue.use(draggableGrid);

// Now create your app as usual

An example usage could look like this:

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

<script>
export default {
  name: "YourComponent",
  data() {
    return {
      items: [
        {
          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>

For more examples visit the examples folder, or read the documentation.

Repository: https://edugit.org/AlekSIS/libs/vue-draggable-grid/

Built by Julian Leucker.