drag-n-drop in Vuetify — Part II
Hello Developers! This is second part of the drag-n-drop in Vuetify series. If you haven’t read the first part, which I highly recommend before reading this. In this part we are going to solve the v-tabs problem of active tab from last part and going to implement drag-n-drop functionality for Data Tables, which is requested feature in our Vuetify Community. So here we go…
Solution for drag-n-drop with v-tabs ( from part — I )
When we dragged the active tab from one place to another, it was loosing the focus. Also if another tab was dragged anywhere, the active tab also was loosing the focus as seen here. To solve this problems, we have to see the events provided by the Vue.draggable. There is support for start, add, remove, update, end, choose, sort, filter, clone . That’s are lot to choose from, but we are going to use the update event. Other events are also useful. You can play with them.
The update event gets fired when user drops the tab from one place to another. So on the update event we fire our tabUpdate function in methods. The update methods provide an event with newIndex, oldIndex and much more but we only need the indexes. We have v-model on v-tabs for changing active tab position. The href on v-tab should be same as id of v-tab-item for changing active tab from code. We also use index from both the v-for which gives us flexibility of making sure we get tab at that index regardless of drag-n-drop.
The tabUpdate function has logic related to how should drag-n-drop of the tab should be handled. The comment in gist are enough to explain that function so I will not repeat it here. Here is also a working codepen. And we have done it. The v-tabs now show the correct active tab without any problem as shown below.
drag-n-drop with v-data-table
So here we are at the last part of our series. This is hard one to figure out and that’s why most of you were asking for it. 😉 So I won’t make you wait anymore. The thing is Vue.draggable is not suitable when we have template with slot and scoped-slot . The draggable component inserts a div into the DOM unless you specify an element prop like :element="'v-data-table'". I tried every combination and even tried component-data prop of draggable component to pass items and headers with this combination, but nothing was working.
The main goal was to set tbody of table as draggable component and it was not possible because Vuetify uses template as a slot for rendering items. That means you can create Data Table with copying classes and HTML markup, but then you loose the sort and other functionality. It was getting hard
And then after scratching my head for many hours I visited the main Sortable library. There two lines of code shocked me. really !!!
Can you believe it? It lets you select any element of your code and make it work with drag-n-drop without any problem. So I just did following three steps.
With these few lines of code, I was ready for a break. It was working. I was able to move entire row on the place of another row. The drag-n-drop was working. See below to believe it.
But there is one problem. Whenever I clicked the row of the table, the drag event was fired. It meant that I was not able to select the text in table. Only drag it and drop it. Which is not super fun every time. What can we do? Don’t worry. The Sortable library is fully packed with 34 options. I suggest you to check them out. The one which we are going to use is handle option.
This option provide an ability to set an area in each item to restrict the drag-n-drop functionality to that area only. The user can’t move item from other place. So how can we use it to our advantage? I have showed three steps in image which will explain everything. Sorry for the different color scheme, carbon doesn’t let me do it.
And here is a result of above changes.
You can find the gist here and codepen here for the above implementation of the Data Table. It was super fun to find that out.
Conclusion
In conclusion first thing I want to tell you is about the size of both libraries. I know Vue.draggable is wrapper around sortablejs, but still you can achieve same results with some non-vue JavaScript code just like we did. It is up to you.
The above examples we tackled down from both parts of series tells us something about programming. Sometimes you may have to find your answers by yourself. Sometimes there will be someone to guide you. But you should know that there is always a way to solve your problems. So if you want me write about something else which you think will benefit the community, comment below.
If you liked what I wrote or it have helped you in any way, you can thank me by clapping for me. It gives motivation to write. Follow me on Medium and on my twitter account so you get notified about new content I write instantly.
