vue拖拽div盒子实现上下拖动互换

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] = itemnewItems[to] = this.draggingthis.formList = newItems},// 完成元素拖动后触发handleDragEnd() {this.dragging = null}
}}
</script>