draggable布局 vue_vue-draggable配置从入门到精通

以上是实现项目结果，难点在于二级的拖动不会影响三级，就是二级领导可以随便换，三级员工保持不变，一二三级可以随便拖拽，还有一些新建和条件弹窗等功能。vue-draggable是数据驱动的，实现以上效果，而且布局要随之变化，确实花费了一些功夫。

首先

我们讲一下vue的基础用法，在掌握了基础用法以后，我们就会融汇变通，实现比较难的需求。

安装

cnpm i vuedraggable -S

使用

使用很简单，在需要使用拖拽的界面引入，组件中注册，就可以使用了。

import draggable from 'vuedraggable'

...

export default{

components:{

draggable,

},

...

属性

group: { name: "...", pull: [true, false, clone],

tag: 'td' // 默认div，设置draggable标签解析html标签

v-model：data // 绑定数据列表

put: [true, false, array] } //name相同的组可以互相拖动, pull可以写条件判断，是否允许拖走，put可以写条件判断，是否允许拖入

sort: true, // 内部拖动排序列表

delay: 0, // 以毫秒为单位定义排序何