1.安装插件
npm i -s vuedraggable
2. 使用插件
import Draggable from 'vuedraggable'
注册
components: { Draggable },
<draggable v-model="checkArr" filter=".forbid" animation="300" :move="onMove" @end="dragend"
@sort="handleSortChange">
<transition-group>
<div v-for="(item, index) in checkArr" :key="item.id">
<div class="img-item">
<img class="icons" :src="item.path_url" />
<el-image style="width: 100px; height: 100px" :src="item.path_url" fit="cover"></el-image>
</div>
</div>
</transition-group>
</draggable>
sort方法
handleSortChange(val) {
const targetRow = this.checkArr.splice(val.oldIndex, 1)[0] // 获取第一条数据
this.checkArr.splice(val.newIndex, 0, targetRow)
// 将数组进行深拷贝,置空后重新赋值给数组
let newArr = this.checkArr.splice(0)
this.checkArr = [] // 置空
this.checkArr = newArr
// this.$nextTick(() => {
// this.checkArr = newArr
// // this.$set(this, 'checkArr', newArr)
// })
console.log(this.checkArr)
},