How Do I Drag and Drop in Vue?

Vue.js is great for making interactive interfaces. That includes interfaces where elements can be dragged around and dropped in order to manually sort elements, or group them in different ways (imagine a Kanban style board like Trello). Drag and drop support isn’t built into the core of Vue.js out of the box however.

So how do I go about supporting drag and drop in a Vue.js application?

Hello Vue Draggable

Say “Hello” to Vue Draggable. This Vue.js component makes it easy to define arrays of data and then use those arrays to power sortable lists where each array element can be visually dragged to re-order the item within the array. You can even drag and drop elements between 2 or more arrays!

At it’s core, it’s a handy wrapper around Sortable.js.

So, how does it work? I’m glad you asked!

Step # 1 - Install Vue Draggable

In this tutorial we’ll target Vue version 3. It’s important to use the next version of Vue Draggable.

npm i vuedraggable@next

Step #2 - Use the component to sort array Items

Next, you can get right down to business with the draggable component. It takes an array for it’s v-model and in it’s item slot you have access to each individual item in the array. You can add whatever markup and styling you want for each item. 

<script setup>
import { ref } from 'vue';
import draggable from 'vuedraggable';
const meals = ref([
  'Hamburger',
  'Pizza',
  'Spaghetti',
  'Tacos',
  'Teriyaki Chicken',
]);
</script>

<template>
  <h1>Favorite Foods</h1>
  <draggable v-model="meals" tag="ul">
    <template #item="{ element: meal }">
      <li>{{ meal }}</li>
    </template>
  </draggable>
</template>

Best of all, each item is now magically draggable!

draggable-sort-favorite-foods.gif

You can see the result of the above code running in stackblitz here.

Step #3 - Use 2 components to move items between different arrays

Besides sorting elements within a single array, you can also move items between different arrays. This works by using another instance of the draggable component, with the v-model on a different array, and (here’s the key) a group prop that’s the same between both uses of draggable.

<script setup>
import { ref } from 'vue';
import draggable from 'vuedraggable';
const meals = ref([...]);

const yuckyMeals = ref([
  'Bat wing soup',
  'Spicy Octopus',
  'Anything from Taco Bell',
]);
</script>

<template>
  <h1>Favorite Foods</h1>

  <!--Notice the group prop is the same on both <draggable>-->
  <draggable v-model="meals" tag="ul" group="meals">...</draggable>

  <h1>Terrible Foods</h1>
  <draggable v-model="yuckyMeals" tag="ul" group="meals">
    <template #item="{ element: meal }">
      <li>{{ meal }}</li>
    </template>
  </draggable>
</template>

multiple-lists.gif

You can checkout the source code for this in StackBlitz.

Step #5 - Jazz it Up With a Smooth Transition

Lastly, you can boost the user experience by using the animation prop to provide a smooth transition!

<draggable v-model="meals" :animation="300" ...>
<draggable v-model="yuckyMeals"  :animation="300" ...>

draggable-transition.gif

View the source code in StackBliz.

Drag and Drop Away!

Congrats! You’ve nailed the basics of drag and drop in a Vue.js 3 application! Checkout more examples of how to use Vue Draggable on their official examples page. Plus, if you’re interested in taking your drag and drop skills to the next level, checkout our premium course: Build a Drag-and-Drop Trello Board with Vue.js.

In the course, we use Vue draggable to build a completely functional Trello style task board and dive into the library more in depth, along with other technologies like Tailwind CSS and VueUse