Vue Drag and drop is a feature of many interactive web apps. It provides an intuitive way for users to manipulate their data. Adding drag and drop feature is easy to add to Vue.js apps.
Here are 10 vue drop components that contribute to the flexibility of your vue application.
Vue component (Vue.js 2.0) or directive (Vue.js 1.0) allowing drag-and-drop and synchronization with view model array.
Based on and offering all features of Sortable.js
Demo: https://sortablejs.github.io/Vue.Draggable/#/simple
Download: https://github.com/SortableJS/Vue.Draggable/archive/master.zip
Real-time kanban board built with Vue.js and powered by Hamoni Sync.
Demo: https://dev.to/pmbanugo/real-time-kanban-board-with-vuejs-and-hamoni-sync-52kg
Download: https://github.com/pmbanugo/realtime-kanban-vue/archive/master.zip
Drag & drop hierarchical list made as a vue component.
Goals
Demo: https://rhwilr.github.io/vue-nestable/
Download: https://github.com/rhwilr/vue-nestable/archive/master.zip
VueJS directive for drag and drop.
Native HTML5 drag and drop implementation made for VueJS.
Demo: https://vivify-ideas.github.io/vue-draggable/
Download: https://github.com/Vivify-Ideas/vue-draggable/archive/master.zip
vue-grid-layout is a grid layout system, like Gridster, for Vue.js. Heavily inspired in React-Grid-Layout
Demo: https://jbaysolutions.github.io/vue-grid-layout/examples/01-basic.html
Download: https://github.com/jbaysolutions/vue-grid-layout/archive/master.zip
It’s a tree components(Vue2.x) that allow you to drag and drop the node to exchange their data .
Feature
Demo: https://vigilant-curran-d6fec6.netlify.com/#/
Download: https://github.com/shuiRong/vue-drag-tree/archive/master.zip
A Simple Drag & Drop example created in Vue.js.
Demo: https://seregpie.github.io/VueDragDrop/
Download: https://github.com/SeregPie/VueDragDrop/archive/master.zip
Vue Component for resize and drag elements.
Demo: http://kirillmurashov.com/vue-drag-resize/
Download: https://github.com/kirillmurashov/vue-drag-resize/archive/master.zip
A fast and lightweight drag&drop, sortable library for Vue.js with many configuration options covering many d&d scenarios.
This library consists wrapper Vue.js components over smooth-dnd library.
Show, don’t tell !
Demo: https://kutlugsahin.github.io/vue-smooth-dnd/#/cards
Download: https://github.com/kutlugsahin/vue-smooth-dnd/archive/master.zip
Drag and drop so simple it hurts
Demo: http://astray-git.github.io/vue-dragula/
Download: https://github.com/Astray-git/vue-dragula/archive/master.zip
#vue #vue-drag #vue-drop #drag-and-drop #vue-drag-and-drop