We can create a draggable and sortable grid with the vue-js-grid package.
It’s easy to use.
First, we install it by running:
npm install vue-js-grid
Next, we can use it by writing:
main.js
import Vue from "vue";
import App from "./App.vue";
import Grid from "vue-js-grid";
Vue.use(Grid);
Vue.config.productionTip = false;
new Vue({
render: h => h(App)
}).$mount("#app");
We registered the Grid
component from vue-js-grid globally with Vue.use
.
App.vue
<template>
<div id="app">
<grid :draggable="true" :sortable="true" :items="items" :height="100" :width="100">
<template slot="cell" scope="props">
<div>{{props.item}}</div>
</template>
</grid>
</div>
</template>
<script>
export default {
name: "App",
data() {
return {
items: Array(50)
.fill()
.map((_, i) => i)
};
}
};
</script>
We created an array with 50 minutes as the property of items
.
To do that we created an array with 50 elements with Array(50)
.
Then we called fill
and map
to fill the entries with numbers.
In the template, we have the grid
component with a few props.
draggable
is set to true
to make the grid items draggable.
sortable
is also set to true
so that we can sort then entries.
items
is set to items
. This is the prop for setting the grid items.
height
sets the height of the grid in percentage.
width
sets the width as a percentage.
In the grid
component, we have the template
to render to grid items.
Now we get a responsive grid with 50 numbers displayed as the content.
It responds to resizing so it’s responsive.
We can drag and drop them grid items as we wish.
This is one of the easiest components for creating a drag and drop grid.
2 replies on “Build a Drag and Drop Grid with Vuejs”
Hello john,
Thanks for the article.
I’m working in a drag n drop project in vuejs 3.
But i’m stock because when the user do
The drop is necessary create 3 html elements.
I have a vanilla js function to do this, but is necessary change to vue.
Do you think is posible using vuejs add a vue component programatically?
Thanks for reading, Jose.
You should add the component and use v-if or v-show to control when the component is shown.