在vue实现dom的拖拽

项目场景：

拖拽包裹视频组件的dom，实现交换视频的位置。

---

<div v-for="index in 16" 
    :key="index" 
    :id="divId(index)" 
    class="videoClass" 
    style="border: 1px solid #EBEBEB" 
    draggable="true" 
    @dragstart="handleDragStart(videos[index - 1], index-1)" 
    @dragover="handleDragOver($event)"
    @drop="handleDrop(videos[index - 1], index-1)" 
>
    <CommonVideo 
        :id="videoId(index)" 
        :video="videos[index - 1]" 
        ref="videoRef" 
    >
    </CommonVideo>
</div>

// js部分
fromData: any = null
fromIndex: number = -1

divId(index: number) {
    return "video_" + this.id + (index - 1);
}

videoId(index: number) {
    return "VideoObjectId_" + this.id + (index - 1);
}

created() {
	this.init()
}

init() {
    for (let i = 0; i < 16; i++) {
    	// getDefaultVideo()为默认的video对象
        this.videos.push(getDefaultVideo());
    }
    this.videos = deepCopy(this.videos)
}

// 交换videos数组中的拖拽文件与目标文件的位置和数据
handleDragStart(data, index) {
    this.fromData = data
    this.fromIndex = index
}

// 放置交换位置后的两个数据
handleDrop(data, index) {
    this.$set(this.videos, index, this.fromData)
    this.$set(this.videos, this.fromIndex, data)
}
handleDragOver(e) {
    //默认无法把元素放置到其他元素当中，所以需要prevent
    e.preventDefault();
    e.dataTransfer.effectAllowed = "move";
}

---