vue拖拽排序
一、增加拖拽属性、事件
|
1 2 3 4 5 6 7 8 |
<template :key="index" v-for="(v, index) in vis"> <div :ref="v.uid"> <example :draggable="true" @dragstart="dragStart($event, v, index)" @dragend="dragEnd($event, v, index)" @dragover="dragOver($event, v, index)" /> </div> </template> |
二、方法
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 |
export default { data () { return { vis: [], oldObj: {}, // 记录需要移动的数据对象 } }, methods: { dragStart(e, item, index) { this.oldObj = { $event: e, $index: index, $target: item } }, dragEnd(e, item, index) { let newIndex = index let oldIndex = this.oldObj.$index let newObj = {} this.$nextTick(() => { for (let i in this.vis) { let dom = this.$refs[this.vis[i].uid][0].getBoundingClientRect() if (dom.y + dom.height > e.clientY && e.clientY > dom.y && dom.x + dom.width > e.clientX && e.clientX > dom.x) { newIndex = i newObj = this.vis[i] break } } if (newIndex === this.oldObj.$index) return this.setData(newIndex, oldIndex) }) }, dragOver(e) { e.preventDefault() }, setData(newIndex, oldIndex) { const t = this.vis.splice(oldIndex, 1) this.vis.splice(newIndex, 0 , t[0]) } } } |