One of the most popular and sought-after in this list is Sortable.js, having over 23k likes on its GitHub repo. You might guess that it’s because the community behind this project worked on bringing the library to literally all frontend frameworks, including Angular, React, Vue, Polymer, Ember.js, and others.
In this tutorial, we will be exploring vue.draggable — the official Sortable.js component for Vue-based projects — while covering the following sections:
- Setting up vue.draggable (for Vue 2.x and 3)
- Building a sample Kanban board similar to Trello — a practical application
At the end of the tutorial, here is what our project will look like:
Before we get into the article, here are some things you should have:
- Basic familiarity with Vue.js and Vue CLI installed
- Node.js and npm/yarn installed
- A text editor
Some of the reasons the developer community prefers vue.draggable for drag-and-drop implementation includes:
- Supported touch devices — Unlike other libraries out there, vue.draggable drag-and-drop implementation is not just limited to moving elements with your mouse cursor; it works on touch devices also
- Drag handles and selectable text — This library also lets you handle drag events and automatically recognizes when the user is trying to select a text in a draggable element
- vue.draggable reuses existing UI library components — You can also attach existing Vue components to draggable elements
Setting up vue.draggable
Adding vue.draggable to a new Vue project is pretty straightforward. First, you want to create a new application with Vue CLI:
After creating our new application, we can add the vue.draggable package by running:
N.B., if your application is built with Vue 3 rather than 2.x, you should install
[email protected] instead:
To try things out, open up
src/App.vue in your project folder and change its contents to the code below:
Here, we’d imported the draggable component from vue.draggable and rendered it twice with dummy data just to showcase how this library works. In the next section, we will dive into how these data are added, along with some other props you can use in the draggable component.
Next, run the app:
You should see the following output in your browser:
Out of the box, all child elements in the
component will have drag-and-drop functionality. This is quite similar to how CSS flexbox works:
While this is not required, it is advisable to sync all draggable items with the
component. This is useful in cases where we want to attach custom functions to draggable events.
We can do this by adding the value
list prop to our component:
Running the code above, you should have the following output in your browser:
vue.draggable also supports other useful props for your project.
group prop accepts an object that we can use to categorize draggable items, and it also sets what happens when we pull or put new items into this category.
Below is the updated code from our first example where we’d set the
pull option to
pull option to
clone means that dragging an element out of this list will
clone the element and not move it permanently out of the list. And setting
false means we can’t drag new elements into this group.
Running this code will give the following output:
We use the
tag prop to specify the HTML element or the name of a Vue component that
creates as an outer element for the included slot, and this defaults to
pull value is set to
clone in a group (like in our previous example), we can add an additional
clone prop to the source component.
This prop accepts a function that is triggered when elements inside the group are cloned — i.e., if we have our second draggable element with the new clone prop like so:
And we define a method
Every time, an item is cloned in
list2, this function is triggered, and the message “cloned” along with the cloned item property will be logged in the browser console.
This prop accepts a function with which we can access the event and details of a
draggable element when it is on
And we can have our
detectMove function as:
vue.draggable also provides a transition wrapper with which we can animate the movement of draggable items. This is possible with the
component. We’ll only need to add a transition name to this element, and anytime a drag happens, a new string
-move is appended to our transition name so that we can specify the transition properly with CSS.
Below is a code that adds a transition to our previous simple list example:
Running this new example, we have a smooth transition when we drag our elements:
Building a Kanban board
Our goal here is to create a four-column project management board that lets you move tasks to the categories idea, to do, in progress, and finally to ready to go.
To avoid writing excess CSS code, we will be using Bootstrap to quickly set up our grid and task cards. To do this, open up
public/index.html in your project folder and add an entry for Bootstrap CDN inside the
head tag like below:
Next, open up
src/App.vue and change its contents to the following:
The code above will create the necessary columns for our Kanban board. Running the program, you should see the following output displayed in your browser:
Next, we want to import vue.draggable in the
script section and also create some dummy tasks for each column in our board:
The final step is to implement the
component in our page and loop through tasks in each column respectively.
To do this, update
src/App.vue to the code below:
And running the code, we should have our Kanban board ready:
What can I do with vue.draggable?
You could do a lot more with vue.draggable, such as develop a more complex interface. All that stands in your way is your own imagination. Some other examples of what you could do with this library are highlighted below:
It’s also easy to include the drag and drop feature in a table with vue.draggable, as shown in the example below. The implementation is as simple as the previous ones, and the code for this is included below for your convenience:
Drag and replace
Another interesting concept is the drag and replace feature; i.e., drag an item from one group so that it replaces another item in another group. An example for this can also be seen below, as well as the code reference:
You can also explore a lot more interesting examples of what people have built with vue.draggable on CodePen.
Sortable.js offers a fast and easy solution for implementing drag-and-drop in your application, with support for multiple frontend frameworks. And in this article, we’ve explored vue.draggable (the Sortable.js official component for Vue.js projects), how easy it is to use, and we also learned how to create a Kanban board.
While this article offers all you need to get started with implementing vue.draggable, if you are interested in learning more about Sortable.js as a framework itself, their GitHub repo is a great place to get started.
Experience your Vue apps exactly how a user doesDebugging Vue.js applications can be difficult, especially when there are dozens, if not hundreds of mutations during a user session. If you’re interested in monitoring and tracking Vue mutations for all of your users in production, try LogRocket. https://logrocket.com/signup/
The LogRocket Vuex plugin logs Vuex mutations to the LogRocket console, giving you context around what led to an error, and what state the application was in when an issue occurred.
Modernize how you debug your Vue apps - Start monitoring for free.