A Vue Dragable (Vue.js 2.0) or directive (Vue.js 1.0) component that allows drag-and-drop and synchronization with the view model. Based on and providing all the features of Sortable.js.
Features
- Full support of Sortable.js features:
- Supports touch devices
- Supports drag handles and selectable text
- Smart auto-scrolling
- Support drag and drop between different lists
- No jQuery dependency
- Keeps in sync HTML and views a model list
- Compatible with Vue.js 2.0 transition-group
- Cancellation support
- 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
andcomponentData
props
Must Read: Create and Reorder Lists With Drag-and-Drop | SortableJS
Vue Drag-and-Drop Component Based On Sortable.js
Post Name | Vue Draggable Component JS |
Author Name | SortableJS |
Category | Draggable, Vue |
Official Page | Click Here | Click Here |
Official Website | github.com |
Publish Date | March 3, 2022 |
Last Update | July 29, 2023 |
Download | Link Below |
License | MIT |
How to make use of it:
Install & Download:
yarn add vuedraggable npm i -S vuedraggable
Use draggable component:
<draggable v-model="myArray" group="people" @start="drag=true" @end="drag=false"> <div v-for="element in myArray" :key="element.id">{{element.name}}</div> </draggable>
import draggable from 'vuedraggable' ... export default { components: { draggable, }, ...
Event object has the same property as the Sortable onMove event, and 3 additional properties:
draggedContext
: context linked to dragged elementindex
: dragged element indexelement
: dragged element underlying view model elementfutureIndex
: potential index of the dragged element if the drop operation is accepted
relatedContext
: context linked to the current drag operationindex
: target element indexelement
: target element view model elementlist
: target listcomponent
: target VueComponent
See Demo And Download

Official Website(SortableJS): Click Here
This superior jQuery/javascript plugin is developed by SortableJS. For extra Advanced Usage, please go to the official website.