Vue directives for modifying lists with the HTML5 drag & drop API

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

Directive interface change

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.

![v](https://github.githubassets.com/images/icons/emoji/unicode/270c.png =20x20)This mean it should be a component. You can view vddl.

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

import Vue from 'vue';
import vueDragAndDropList from 'vue-drag-and-drop-list';

Vue.use(vueDragAndDropList);

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.

ul[dnd-list], ul[dnd-list] > li {
    position: relative;
}

Wiki

you should read the Vue directive doc first.

Development

npm install
npm run watch // rollup watch

npm run build //rollup -c

Run Demo

cd demo

// vue project
npm install
npm run dev // webpack

See all demos source code in 'views/*.vue' file.

Thanks

angular-drag-and-drop-lists

License

MIT

GitHub

https://github.com/hejianxian/vue-drag-and-drop-list