项目开发中需要用到拖拽组件，因为前端技术框架是vue，这里就使用了vue的一款拖拽插件vue.draggable，一般基本的需求都能满足，这里使用了多个draggable嵌套，达到两级之前相互拖拽的功能。
以下是类似teambition的效果图片，最外层为一个draggable，可以左右拖动，然后每个块里面还有小块，小块组成一个draggable，可以上下拖动，也可以在大的块之间拖动。
这里说一下实现原理。
首先，要搞清楚draggable的api，这里提供以下博主自己发现的一个vue.draggable中文api地址vue.draggable中文文档（http://www.itxst.com/vue-draggable/tutorial.html），里面基本属性和方法都用讲到，有时间的可以去学习一下，要查看详细的说明可以git去看官方文档说明，官方文档（https://github.com/SortableJS/Vue.Draggable）。
这里用到了以下几个属性和事件，着重说明下：
- group：拖拽分组，多组之间相互拖拽，可以实现不同数组之间相互拖拽。比如group都为itxst的组之间可以相互拖动，本文例子中分别给两个draggable设置了不同的group属性，是防止大的被拖到小的块里面去
-
list：作为值属性的替代，list是一个与拖放同步的数组。这里在二级draggable使用了该属性，因为两个draggable用到了同一数据源，二级draggable中用list替代v-model
-
animation：通过animation属性设置vue.draggable过渡效果，这样拖动时过渡位置就不会显的太生硬。
-
disable: 通过disabled属性实现开启或禁用vue.draggable的拖拽效果。
-
end()：拖拽完成时的事件，如果想和后端实现动态更新，可以在这个方法里面和后端进行数据交互
然后就是示例demo了，这里一些代码段，样式什么的大家可以自由发挥
// 第一步，安装vue.draggable插件,yarn或者npm都可以
yarn add vuedraggable
npm i -S vuedraggable
// 第二步，使用插件
import draggable from 'vuedraggable'
<div><draggable class="list-group" group="task" v-model="projectList" @end="draggerEnd()"><div class="card-list-span" v-for="(process, index) in projectList" :key="process.opListId"><div class="span-header"><div class="header-title">{{ process.opListName }}</div></div><div class="span-body"><div class="body-list"><draggablegroup="project":list="process.taskVoList"@end="taskDraggerEnd()"><divclass="body-list-span"v-for="task in process.taskVoList":key="task.opTaskId"><div>{{ task.opTaskTitle }}</div><div>{{ task.opTaskHandler }}</div></div></draggable><div slot="footer"><Author author="yunygl-yylcgl-cjrw"><div class="add-task" @click="addTask(index)"><i class="el-icon-plus" style="margin-right: 5px;"></i>添加任务</div></Author></div></div></div></div></draggable>
</div>data() {return {projectList: [{id: "001",name: "流程一",taskList: [{id: "001001",taskTitle: "任务一"},{id: "001002",taskTitle: "任务二"}]},{id: "002",name: "流程二",taskList: [{id: "002001",taskTitle: "任务一"}]}]
}method: {// 添加任务addTask(index) {this.projectList[index].taskList.push( {id: "00200232",taskTitle: "任务二"})},
}上面就是大致流程和部分代码。
小伙伴如果有疑问可以第一时间评论或留言，看到后也会及时回复的，有帮助的麻烦动动手指点个赞哟！
