vue拖拽div盒子实现上下拖动互换
<div v-for="(item, index) in formList" :key="index" draggable="true"
@dragstart="handleDragStart($event, item)"
@dragenter="handleDragEnter($event, item)"
@dragover.prevent="handleDragover($event, item)"
@drop="handleDrop($event, item)"
@dragend="handleDragEnd($event, item)">
{{item.title}}
</div>
<script>
export default {
data () {
return {
formList: [
{ type:0,title: 'jwq'},
{ type:1,title: 'zhn'},
{ type:2,title: 'zzz'}
],
dragging: null
}
},
methods: {
// 当元素被拖动时
handleDragStart(e, item) {
this.dragging = item
},
// 当被鼠标拖动的对象进入其容器范围内时触发此事件
handleDragEnter(e) {
// 为需要移动的元素设置dragstart事件
e.dataTransfer.effectAllowed = 'move'
},
// 当某被拖动的对象在另一对象容器范围内拖动时触发此事件
handleDragover(e) {
// 首先把div变成可以放置的元素,即重写dragenter/dragover
// 在dragenter中针对放置目标来设置!
e.dataTransfer.dropEffect = 'move'
},
// 当放置被拖元素时
handleDrop(e, item) {
e.dataTransfer.dropEffect = 'move'
if(item === this.dragging){
return
}
const newItems = [...this.formList]
const from = newItems.indexOf(this.dragging)
const to = newItems.indexOf(item)
newItems[from] = item
newItems[to] = this.dragging
this.formList = newItems
},
// 完成元素拖动后触发
handleDragEnd() {
this.dragging = null
}
}
}
</script>