🐴 Vue directives for modifying lists with the HTML5 drag & drop API.
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.
demo update demo Nov 3, 2016
dist v1.0.0 Jan 25, 2017
test rollup config Sep 1, 2016
.gitignore Initial commit Aug 25, 2016
.npmignore .npmingnore Oct 16, 2016
LICENSE Initial commit Aug 25, 2016
README.md Update README.md Aug 25, 2017
index.js Fix drag with text bug Jan 18, 2017
package.json v1.0.0 Jan 25, 2017
rollup.config.js fix IE9 Sep 3, 2016


vue-drag-and-drop-list npm

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.

😮 Now support 2.0, see vddl 👏👏


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.

✌️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.


npm install vue-drag-and-drop-list --save


yarn add vue-drag-and-drop-list


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


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;


you should read the Vue directive doc first.


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.