Modified1 year, 7 months ago. I have a div inside a vue component, I want to make the component draggable.
I checked with many vue draggable plugins, but they have a seperate component for drag and not as a directive to just add like in angular draggable.
Please help me with this?
Apsara VidhyaApsara Vidhya.
You need to add vuedraggable to your node modules.
yarn add vuedraggable.
and then you need something like this:.
11 gold badge1010 silver badges1919 bronze badges.
1919 bronze badges.
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.
Full support of Sortable.js features:Supports touch devicesSupports drag handles and selectable textSmart auto-scrollingSupport drag and drop between different listsNo jQuery dependency.
Supports touch devices.
Supports drag handles and selectable text.
Support drag and drop between different lists.
No jQuery dependency.
Keeps in sync HTML and view model list.
Compatible with Vue.js 2.0 transition-group.
Events reporting any changes when full control is needed.
- Reuse existing UI library components (such as vuetify, element, or vue material etc..) and make them draggable using tag and componentData props.
- Admin Dashboard Templates made with Vue, React and Angular.
- Find this project useful?
- You can buy me a ☕️ or a 🍺.
- Beware it is vuedraggable for Vue 2.0 and not vue-draggable which is for version 1.0.
Use draggable component:. Draggable component should directly wrap the draggable elements, or a transition-component containing the draggable elements.
Type: ArrayRequired: falseDefault: null.
Building a Kanban board
- Input array to draggable component.
- Typically same array as referenced by inner element v-for directive.This is the preferred way to use Vue.draggable as it is compatible with Vuex.It should not be used directly but only though the v-model directive:.
- Type: ArrayRequired: falseDefault: null.
- Alternative to the value prop, list is an array to be synchronized with drag-and-drop.The main difference is that list prop is updated by draggable component using splice method, whereas value is immutable.Do not use in conjunction with value prop.
- New in version 2.19.