vue拖拽组件使用 嵌套使用

1. 下载插件 npm 输入 npm i -S vuedraggable 或者 yarn add vuedraggable
   
2. 页面引入组件 import draggable from 'vuedraggable'
3. 插入代码块<draggable v-model="myArray" group="people" @start="drag=true" @end="drag=false"> <div v-for="element in myArray" :key="element.id">{{element.name}}</div></draggable>

注意：key最好为字段的唯一如id，start为 任务拖动开始 end为结束时已经更改后的数组。如果需要知道移动的前后位置可以 这样操作<draggable v-model="myArray" group="people" @start="onStart" @end="onEnd" @move="moved"> <div v-for="element in myArray" :key="element.id">{{element.name}}</div></draggable> 在函数中写下面展示一些 内联代码片。

// evt.draggedContext.futureIndex 移动后的索引
//evt.relatedContext 移动后的关联数据   为移动后的位置的上一条数据
//evt.relatedContext 移动前的关联数据 为移动者本身

// evt为移动对象
	moved(evt){
		console.log(evt)
		console.log(evt.draggedContext.futureIndex)
		console.log(evt.relatedContext)
		console.log(evt.draggedContext)
	}，
	 onStart(){
            this.drag = true
    },
    //移动后请求数据
	onEnd() {
            this.drag = false
            let arr = []
            this.workflow.forEach((item) => {
                arr.push(item.id)
            })
            dragWork(arr).then(response=>{
                const {code} = response
            })
        },

4. 如何嵌套多个drag

// handle=".mover"  有 .mover的class 才能移动 ，或者通过fiter 配置哪些可移动 。 group为分组，同一个组的成员才能移动 下面是带你过关代码

// 
<draggable class="wrapper" v-model="workflow" handle=".mover"  @start="onStart" @end="onEnd"  :options="{group:{name: group},filter: '.undraggables', sort: true }" >
        <transition-group class="board" >
               <draggable  :list="items.data" :disabled="disabled" handle=".handle"  @start="startChild"  :move="checkMove" @end="endChild(index)"  :set-data="setData"  :options="{group:{name: task},filter: '.undraggable', sort: true}">
                </draggable>
       </transition-group>
</draggable>