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
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
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
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
A lightweight Vue Component for draggable and resizable elements.
Demo
Download
Top comments (0)