DEV Community

Cover image for 4 Best Drag And Drop Components To Create Draggable Elements on Vue.js
Alexandre Freire
Alexandre Freire

Posted on

4 Best Drag And Drop Components To Create Draggable Elements on Vue.js

Drag and drop are traditional but enduring features that have been widely used in various web pages since the last century.

To simplify the implementation of the native HTML5 drag and drop features on Vue.js applications, I collect and list here the 4 best Vue.js drag and drop components for draggable elements.

1 - Draggable And Resizable Component For Vue.js

Alt Text

Description:

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
Demo
Download

2 - Smooth Draggable Sortable Component For Vue.js

Alt Text

Description:

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

This library consists wrapper Vue.js components over smooth-dnd library.
Demo
Download

3 - vue-slicksort

Alt Text
Create mobile-friendly sortable lists using the Vue-slicksort component. Supports both horizontal and vertical lists. Nested lists are supported as well.
Demo
Download

4 - vue-drag-resize

Alt Text
A lightweight Vue Component for draggable and resizable elements.
Demo
Download

Top comments (0)