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
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
update methods provide an
newIndex, oldIndex and much more but we only need the indexes. We have
v-tabs for changing active tab position. The
v-tab should be same as
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.
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
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
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
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
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.
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
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.