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 and componentData props

Must Read: Create and Reorder Lists With Drag-and-Drop | SortableJS

Vue Drag-and-Drop Component Based On Sortable.js

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 element
  • index: dragged element index
  • element: dragged element underlying view model element
  • futureIndex: potential index of the dragged element if the drop operation is accepted
• relatedContext: context linked to the current drag operation
  • index: target element index
  • element: target element view model element
  • list: target list
  • component: 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.