# Vue Draggable Grid

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

## Installation

```bash
npm install vue-draggable-grid
```

## Usage

Include the library in your project:

```javascript
import draggableGrid from "vue-draggable-grid";

Vue.use(draggableGrid);

// Now create 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>
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](./example), or read the [documentation](./docs).

Repository: [https://edugit.org/AlekSIS/libs/vue-draggable-grid/](https://edugit.org/AlekSIS/libs/vue-draggable-grid/)

Built by [Julian Leucker](https://edugit.org/ZugBahnHof).