Advanced Vue Drag-and-drop Component-Based On Sortable.js

vue-draggable-component-js

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.

vue draggable example, vue draggable resizable, drag and drop touch screen javascript, html touch drag event, html5 touch drag and drop, vuedraggable, vue draggable npm

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,
       },
 ...

Advanced Touch-enable Draggable Component, Vue Draggable Plugin/Github, draggable not working in mobile


See Demo And Download

Official Website(SortableJS): Click Here

This superior jQuery/javascript plugin is developed by SortableJS. For extra Advanced Usages, please go to the official website.