以上是项目实现的结果，难点是第二层的拖动不会影响第三层，也就是可以换第二层leader随意，三级员工不变，一、二、三级员工拖拽即可，还有新建、条件弹窗等功能。Vue-draggable是数据驱动的。实现上面的效果花了一些功夫，相应地改变了布局。首先说一下Vue的基本用法。掌握基本用法后，我们再进行整合适配，以实现更高难度的需求。安装cnpmivuedraggable-S使用起来非常简单。在需要使用拖拽的界面中导入，在组件中注册，即可使用。importdraggablefrom'vuedraggable'...exportdefault{components:{draggable,},...attributegroup:{name:"...",pull:[true,false,clone],tag:'td'//默认div,设置draggable标签解析html标签v-model:data//绑定数据列表put:[true,false,array]}//同名分组可以拖动相互Action，pull可以写条件判断，是否允许拖动，put可以写条件判断，是否允许拖动sort:true,//内部拖动排序列表delay:0,//定义何时开始排序，单位毫秒。touchStartThreshold:0,//px，在取消延迟拖动事件之前点应该移动多少像素？disabled:false,//如果设置为true，则禁用sortable。animation:150,//毫秒，运动项排序时的动画速度，'0'-无动画。handle:".my-handle",//拖动列表项中的句柄选择器，设置一些地方拖动有效。filter:".ignore-elements",//不可拖动选择器（字符串类）preventOnFilter:true,//调用"event.preventDefault()"时触发"filter"draggable:".item",//指定哪些项目元素内应该是可拖动类。ghostClass:"sortable-ghost",//设置被拖动元素类的占位符的类名。chosenClass:"sortable-chosen",//设置被选元素的类dragClass:"sortable-drag",//拖动元素的类。forceFallback:false,//忽略HTML5的DnD行为并强制退出。（h5中有一个属性也是拖拽，这里是去除H5拖拽对这个的??影响）fallbackClass:"sortable-fallback",//使用forceFallback时克隆的DOM元素的类名。fallbackOnBody:false,//将克隆的DOM元素添加到文档的正文中。（默认放置在与被拖动元素相同的水平）fallbackTolerance:0,//以像素为单位指定在被认为是拖动之前鼠标应该移动多远。scroll:true,//或HTMLElementscrollFn:function(offsetX,offsetY,originalEvent,touchEvt,hoverTargetEl){...},scrollSensitivity:30,//pxscrollSpeed:10,//px事件开始、添加、删除、更新,end,choose,unchoose,sort,filter,clonestart(evt){}//当拖动从开头开始时触发add(evt){}//当拖动和添加新项目时触发remove(evt){}//从thelistDragaway,removetriggerupdate(evt){}//Listupdatetriggerend(evt){}//对应start,triggerchoose(evt){}拖拽后//选择拖动元素triggersort(evt){}//排序触发change(evt){}//这个很重要，如果数据不是整体提交，单独提交数据的时候会用到evt.added.element/evt.removed.element如果此列表添加元素它将添加添加的数据。如果被删除的元素是被移除的元素，它也会得到移动和删除的位置。index:move(evt,dragevt){}//这个也很重要，当两个列表相互拖动时，有时候需要更新ui。在界面更新之前，会用到move。将元素从一个列表拖动到另一个列表时会立即触发。这时候可以为原位置设置元素样式等等。firefoxfirefox浏览器默认拖拽搜索问题创建(){//防止firefox默认拖拽搜索行为document.body.ondrop=(event)\=>{//防止事件默认行为event.preventDefault()//防止时间冒泡事件。stopPropagation()}}safari浏览器拖动问题safari浏览器拖动一次，无法连续拖动第二次，只能在空白处继续拖动，添加：forceFallback="true"解决
