7 Best Drag And Drop Components To Create Draggable Elements (2023 Update)

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 Jan 16, 2023

1. Vue.Draggable

Vue.Draggable

Demo Download

Vue drag-and-drop component based on Sortable.js.


2. Draggable And Resizable Component For Vue.js

Draggable And Resizable Component For Vue.js 2

Demo Download

A Vue.js component to create draggable and/or resizable elements in an elegant way.


3. vue-drag-resize

Resize and Drag Elements In Vue.js - vue-drag-resize

Demo Download

A lightweight Vue Component for draggable and resizable elements.


4. Smooth Draggable Sortable Component For Vue.js

Smooth Draggable Sortable Component For Vue.js

Demo Download

A Vue.js draggable component to provide a smooth drag to sort experience on elements.


5. Slick Sortable List For Vue

Slick Sortable List For Vue

Demo Download

A set of vue mixins to turn any list into an animated, touch-friendly, sortable list.


6. vue-drag-drop

vue-drag-drop

Demo Download

A lightweight wrapper that abstracts away the wonkier parts of the Drag and Drop API.


7. vue3-draggable-resizable

vue3-draggable-resizable

Demo Download

Draggable and resizable component for vue3.


More Resources:

Need more drag’n’drop libraries for your web applications? Here are a few more resources you might find useful.