项目开发中需要用到拖拽组件，因为前端技术框架是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）。

    这里用到了以下几个属性和事件，着重说明下：

1. group：拖拽分组，多组之间相互拖拽，可以实现不同数组之间相互拖拽。比如group都为itxst的组之间可以相互拖动，本文例子中分别给两个draggable设置了不同的group属性，是防止大的被拖到小的块里面去

2. list：作为值属性的替代，list是一个与拖放同步的数组。这里在二级draggable使用了该属性，因为两个draggable用到了同一数据源，二级draggable中用list替代v-model

3. animation：通过animation属性设置vue.draggable过渡效果，这样拖动时过渡位置就不会显的太生硬。

4. disable: 通过disabled属性实现开启或禁用vue.draggable的拖拽效果。

5. 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">
		  <draggable
			group="project"
			:list="process.taskVoList"
			@end="taskDraggerEnd()"
		  >
			<div
			  class="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: "任务二"})
    },
}

 上面就是大致流程和部分代码。

小伙伴如果有疑问可以第一时间评论或留言，看到后也会及时回复的，有帮助的麻烦动动手指点个赞哟！