drag-n-drop in Vuetify — Part I

Abhay Wawale
Jul 2, 2018 · 3 min read

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.

Image for post
The tasks in completed and not completed list can be re-arranged or interchanged with drag-n-drop functionality.

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.

Image for post
Two v-list with drag-n-drop functionality.

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.

Image for post

And the code is as follows.

v-tabs code for drag-n-drop

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.

Image for post
Problem of after drag-n-drop of v-tabs.

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.

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