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 08, 2021
1. Draggable And Resizable Component For Vue.js
A Vue.js component to create draggable and/or resizable elements in an elegant way.
2. vue-drag-resize
A lightweight Vue Component for draggable and resizable elements.
3. vue-sortable
This is a Vue.js wrapper for the SortableJS library to create draggable and sortable lists without jQuery.
4. Smooth Draggable Sortable Component For Vue.js
A Vue.js draggable component to provide a smooth drag to sort experience on elements.
5. Create Draggable Elements In Vue – v-drag
The simplest way to integrate drag on Vue.js applications.
6. 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.
7. Drag and Drop Library For Vue.js 2 – vue-draggable
A native HTML5 drag and drop implementation made for VueJS 2+.
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