vue-drag-and-drop-list
Vue directives that allow you to build sortable lists with the native HTML5 drag & drop API. Supports nested lists for building trees and other fancy structures.
Demo
Not supported VueJS 2.0
In general, in 2.0 directives have a greatly reduced scope of responsibility: they are now only used for applying low-level direct DOM manipulations. In most cases, you should prefer using Components as the main code-reuse abstraction.
This mean it should be a component. My mistake.😭
Supported browsers
IE9+ and all modern browsers are supported.
Touch devices are not supported, because they do not implement the HTML5 drag & drop standard. However, you can use a shim to make it work on touch devices as well.
Installation
npm install vue-drag-and-drop-list --save
or
yarn add vue-drag-and-drop-list
Usage
;; Vue;
or include as an inline script.
Required CSS styles
Both the dnd-list and it's children require relative positioning, so that the directive can determine the mouse position relative to the list and thus calculate the correct drop position.
Wiki
you should read the Vue directive doc first.
Development
npm installnpm run watch // rollup watch npm run build //rollup -c
Run Demo
cd demo // vue projectnpm installnpm run dev // webpack
See all demos source code in 'views/*.vue' file.
Thanks
License
MIT