How to make a drag and drop effect in Vue — D Weird Coder

Obafemi Ogunmokun
Nov 2 · 2 min read

I’m going to show you how to make a drag and drop effect in your Vue application.

We are going to be using a vue library called Vue-Draggable.

Firstly we add vue-draggable to our vue application.

With NPM or YARN

yarn add vuedraggable npm i -S vuedraggable

or direct link

Import vue-draggable in your vue file

import draggable from 'vuedraggable' ... export default { components: { draggable, }, ...

Now we will create a list of item that we want to apply the drag and drop effect on

<ul> <li>item 1</li> <li>item 2</li> <li>item 3</li> <li>item 4</li> </ul>

Next, we will replace the parent tags of the list with draggable

<draggable :elements="'ul'" :options="{}"> <li>item 1</li> <li>item 2</li> <li>item 3</li> <li>item 4</li> </draggable>

The <draggable> tag has various attributes but I will explain just the ones in the code above

  • : elements — this tells draggable it is replacing the ul tag
  • :options: specifies various behaviors of the draggable element

We can also move elements from one list to another by adding group to the :options attribute

<draggable :elements="'ul'" :options="{group: 'groupItem'}"> <li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
</draggable> <draggable :elements="'ul'" :options="{group: 'groupItem'}"> <li>item 1</li> <li>item 2</li> <li>item 3</li> <li>item 4</li> </draggable>

adding the same group name to both lists will enable the drag and drop effect between each list.

You can get more information on how to use it from the documentation:
https://github.com/SortableJS/Vue.Draggable


Originally published at https://dweirdcoder.com on November 2, 2019.

Obafemi Ogunmokun

Written by

Software Engineer | Blog: https://dweirdcoder.com/

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade