创建排序列表的Vue指令 - vue-drag-and-drop-list

2016-08-25      149      Vue
项目简介

vue-drag-and-drop-list

让你能够创建排序列表的Vue指令,使用了原生HTML5拖拽API。支持嵌套列表,用于构建树和其他花式结构。

浏览器支持

IE9+和所有现代浏览器都支持。

不支持触摸设备,因为他们没有实现HTML5拖拽标准。但是也可以使用ashim在触摸设备上使用它。

安装

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';

Vue.use(vueDragAndDropList);

或者作为一个内联脚本导入.

需要的 CSS 样式

dnd-list和它的子模块都需要相对定位,所以下面这些指令可以确定鼠标相对于列表的位置,从而计算出正确的放置位置。

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