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 Mar 21, 2026
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. Resize and Drag Elements In Vue.js – vue-drag-resize
A lightweight Vue Component for draggable and resizable elements.
Features:
- All props are reactive
- Support touch events
- Use draggable, resizable or both
- Define sticks for resizing
- Save aspect ratio for resizable components
- Restrict size and movement to parent element
- Restrict drag to vertical or horizontal axis
4. 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
5. vue3-dnd
Drag and Drop for Vue3.
6. 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.
7. 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.
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