diff --git a/README.md b/README.md new file mode 100644 index 0000000000000000000000000000000000000000..5dd8e7b23f9d28ba9477f03e2cd02ae9d559d763 --- /dev/null +++ b/README.md @@ -0,0 +1,75 @@ +# 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). \ No newline at end of file