vue drag和drop 以及与video结合

<template>
    <div>
        <div >
            <p>拖拽存放</p>
            <div 
                id="save-box"
                @drop="drop($event)"
                @dragenter="dragEnter($event)"
                @dragover="dragOver($event)"
                @dragleave="dragLeave($event)"
            >
                <p id="drag-element"
                    draggable="true"
                    @dragstart="dragStart($event)"
                    @dragend="dragEnd($event)"
                > 
                    可拖动元素 
                </p>
            </div>
            <div
                id="save-box"
                @drop="drop($event)"
                @dragenter="dragEnter($event)"
                @dragover="dragOver($event)"    
                @dragleave="dragLeave($event)"
            >
            </div>
        </div>
        <div>
            <p>拖拽视频名称加载视频</p>
            <ul style="border:1px solid black;width:50px;margin:5px">
                <li v-for="(item,key) in videoList" :key="key" draggable="true" @dragstart="dragStartVideo($event)">{{ item.name }}</li>
            </ul>
            <video
                width="320"
                height="240"
                controls
                @dragover="dragOver($event)"
                @drop="dropVideo($event)"
            >
            </video>
        </div>
    </div>
</template>

<script>
export default {
    data () {
        return {
            videoList : [
                {
                    name : "video1",
                    video : 'https://www.w3cschool.cn/statics/demosource/mov_bbb.mp4'
                },
                {
                    name : "video2",
                    video : 'https://www.w3cschool.cn/statics/demosource/movie.mp4'
                }
            ]
        }
    },
    methods: {
        dragStart (event) {
            event.dataTransfer.setData("Text", event.target.id) ;
            event.target.style.opacity = "0.5" ;
            // console.log("开始拖拽元素") ;
        },
        dragEnter (event) {
            if ( event.target.id == "save-box" ) {
                event.target.style.border = "3px solid red";
            }
        },
        dragLeave (event) {
            if ( event.target.id == "save-box" ) {
                event.target.style.border = "";
            }
        },
        dragEnd (event) {
            event.target.style.opacity = "1" ;
        },
        dragOver (event) {
            event.preventDefault() ;   // 默认为无法被放置，所以需要取消该默认动作
            // console.log("允许放置元素") ;
        },
        drop (event) {
            event.preventDefault() ;  // 避免浏览器对数据的默认处理（drop 事件的默认行为是以链接形式打开）
            if ( event.target.id == "save-box" ) {
                event.target.style.border = "" ;
            }
            let data = event.dataTransfer.getData("Text") ;
            event.target.appendChild(document.getElementById(data)) ;
            // console.log("放置元素") ;
        },
        dragStartVideo (event){
            let item = this.videoList.find(item => item.name === event.target.textContent)
            event.dataTransfer.setData("video", item.video) ;
        },
        dropVideo (event) {
            event.preventDefault() ;  // 避免浏览器对数据的默认处理（drop 事件的默认行为是以链接形式打开）
            let data = event.dataTransfer.getData("video") ;
            event.target.src = data ;
            // console.log("放置元素") ;
        },
    }
}
</script>

<style lang="scss">
#save-box{
    // float: left; 
    width: 100px ;
    height: 50px ;
    border: 1px solid black ;
    margin: 5px ;
}
</style>

效果：