Home / Blog / How Do I Drag and Drop in Vue?
How Do I Drag and Drop in Vue?

How Do I Drag and Drop in Vue?

Daniel Kelly
Daniel Kelly
January 18th 2023

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, Vue Draggable is 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 therefore, it’s important to use the next version of Vue Draggable.

npm i [email protected]

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 draggable 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 4 - 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 🔥. Here's a little preview of what's in store 😉

Start learning Vue.js for free

Daniel Kelly
Daniel Kelly
Daniel is the lead instructor at Vue School and enjoys helping other developers reach their full potential. He has 10+ years of developer experience using technologies including Vue.js, Nuxt.js, and Laravel.

Latest Vue School Articles

Highlights from Vue.js Nation Day 2

Highlights from Vue.js Nation Day 2

The first day of Vue.js Nation was thrilling, and the second day was even better. The final day of the Vue.js Nation Conference was jam-packed with new announcements, stimulating discussions, and unique workshops. I'm overjoyed with fresh information. Continue reading for all the highlights from Day 2 of Vue.js Nation!
Charles Allotey
Charles Allotey
Highlights from Vue.js Nation Day 1

Highlights from Vue.js Nation Day 1

Vue.js Nation has officially started with Day 1 coming to a close and I can say that it has been super exciting and educative. A packed lineup of awesome speakers and in this article I’ll share some key highlights of the day.
Charles Allotey
Charles Allotey

© All rights reserved. Made with ❤️ by BitterBrains, Inc.