Drag and drop are traditional but enduring features that have been widely used in various web pages since the last century.
Thanks to the HTML5 drag and drop API, creating draggable elements has never been easier in today’s web development.
To simplify the implementation of the native HTML5 drag and drop features on Vue.js applications, I collect and list here the 7 best Vue.js drag and drop components for draggable elements, re-orderable lists, sortable grid layouts, and much more. Have fun.
Originally published Jan 13, 2020, updated Aug 06, 2025
1. Feature-rich Drag’n’drop Sorting Library – vue-draggable-plus
A flexible, feature-rich, customizable drag-to-sort library for Vue 3 applications.
Features:
- All the features of Sortable.js
- Suitable for Vue 3 and Vue2
- Support component, directive, functional call, there is always one that you like
- Written in TypeScript, with complete TS documentation
- Support v-model two-way binding
- Specify the container as the drag container
2. Draggable And Resizable Component For Vue.js
A Vue.js component to create draggable and/or resizable elements in an elegant way.
Features:
- No dependencies
- Touch friendly
- Maintain aspect ratio
- Use draggable, resizable or both
- Define handles for resizing
- Restrict size and movement to parent element
- Snap element to custom grid
- Restrict drag to vertical or horizontal axis
- Provide your own markup for handles
3. Slick Sortable List For Vue
A set of vue mixins to turn any list into an animated, touch-friendly, sortable list.
Features:
v-modelCompatible – Make any array editable with thev-modelstandard- Mixin Components – Integrates with your existing components
- Drag handle, auto-scrolling, locked axis, events, and more!
- Super smooth animations – Chasing the 60FPS dream
- Horizontal lists, vertical lists, or a grid ↔ ↕ ⤡
- Touch support
4. vue3-dnd
Drag and Drop for Vue3.
5. Drag And Drop Component For Vue 3
An advanced drag and drop component for Vue.js 3+. Supports clone, transition group, nested items, Vuex, and much more.
6. Touch-enabled List Sorting – vue-fluid-dnd
vue-fluid-dnd is a Vue component that provides an easy way to create dynamic, interactive, draggable lists in Vue 3 applications. With support for both mouse and touch interactions, this component makes reordering list items intuitive on any device.
Lists can be either vertical or horizontal for flexibility. Customization is also available through CSS and component props if you want to tweak the styling and behavior.
7. Easy Drag And Drop For Vue.js – Easy-DnD
A Vue.js component that makes it easier to implement the drag and drop functionality on your modern web app.
It uses only standard mouse events instead of the HTML5 drag and drop API.
More Resources:
Need more drag’n’drop libraries for your web applications? Here are a few more resources you might find useful.
- Vue.js Drag And Drop Section
- Best Advanced Drag and drop Plugins In JavaScript
- Best Drag And Drop JavaScript Libraries (Vanilla)
- 10 Best Drag And Drop Components For React & React Native