- 下载插件 npm 输入 npm i -S vuedraggable 或者 yarn add vuedraggable
- 页面引入组件
import draggable from 'vuedraggable'
- 插入代码块
<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
})
},
- 如何嵌套多个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>