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

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 vuedraggableor 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
draggableelement
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.
