drag-n-drop in Vuetify — Part I
Hello Developers! Today we are going to talk about integrating drag-n-drop functionality for our Vuetify project. There are some use cases we are going to talk a little bit in deep because in our Vuetify Discord Community many user asked for using drag and drop for data tables. This will be a two part article for now and maybe I can add more if needed. So here we go…
Why Should you bother with it?
If you know why you are using it then skip this paragraph. But for people who don’t know about it, here is some description. It allows you to drag something and drop somewhere. Maybe you have two arrays shown to user as two different lists. One is task completed list and one is, obviously not completed. The user can simply drag something from either list to another list or rearrange the tasks in same list. Here is GIF which will help you understand it totally.
What we are going to do?
There is nothing technical to tell but we will go through examples one by one and at last see how to integrate it with data tables (v-data-table for vuetify users). We are going to use a wonderful library called Vue.Draggable. It is a Vue component allowing drag-and-drop sorting in sync with View-Model and is a wrapper around popular Sortable.js library. This post will be about different use cases with Vuetify. For integration and getting started see the docs of the library. It will explain better than me.
drag-n-drop with two v-list
The two different arrays shown as lists can be made to work with drag-n-drop with each other using :options="{ group: 'your-group' }" on both the draggable components. The group name must be identical.
There are two thing to keep in mind while working with two arrays or lists is that the key you bind to it must be unique and when one of the list is empty, you will not be able to move any item from another list to it. For that you have set a min-height greater than 0 on the draggable component and Vue.draggable docs explain it too. You can see the codepen here and below is the GIF of same code.
drag-n-drop with v-tabs
The v-tabs needed a work around to work with Vue.draggable with having to add v-tabs__container class to the draggable component to make it work. Notice below are two div with v-tabs__container class because we added one to the draggable component but everything works fine except one thing I am going to talk in a little bit.
And the code is as follows.
But there is one problem. The indicator of the tabs doesn’t updated with the tab change. You can see that moving the tab from one place to another leaved the tab indicator on old position and doesn’t update it as shown below.
In Part — II of the this article, We will solve this v-tabs problem and talk about v-data-table drag-n-drop functionality in detail. You have read this far, so I am grateful to you. Clap for me if you liked it and follow me on twitter to get content I write here.
