drag-n-drop in Vuetify — Part II

Abhay Wawale
Jul 20, 2018 · 5 min read

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.

Image for post
Code for Tabs.

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.

Image for post
We fixed the v-tabs problem of active tab. Now we can relax???

drag-n-drop with v-data-table

Image for post
The Data Table component in Vuetify. Can it get any easy?

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.

Image for post
tbody shown from inspector of developer tools

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 !!!

Image for post
This is miracle.

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.

Image for post
And that’s it.

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.

Image for post
Isn’t it a magic.

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.

Image for post
Follow this steps to add a handle to table.

And here is a result of above changes.

Image for post
This way it looks good and you can select the text too.

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.

Image for post
The sortablejs is smaller compared to Vue.draggable. hmm… Obviously 😅

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.

Vuetify

Material Component Framework

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store