vue 拖拽（Drag and Drop）

1、拖拽：设置允许拖拽的div元素及元素拖拽的的开始事件

draggable="true"

@dragstart="drag(item.data)"

<div draggable="true" @dragstart="dragEnterEvent($event, videoSrc.id)" @dragend="dragEnterOver">
    <div style="display:flex;">
        <svg class="kc-svg-icon" aria-hidden="true">
            <use xlink:href="#kc-icon-edgeshipinyuan">></use>
        </svg>
    </div>
    <span class="menu-text">{{ videoSrc.name }}</span>
</div>

function dragEnterEvent(event, id) {
    console.log('drag', event, id)
    event.dataTransfer.setData("deviceId", id);
}

function dragEnterOver(event) {
    event.dataTransfer.clearData()
    console.log('dragEnterOver')
}

2、在拖放区域 drop事件中获取数据

<div class="grid"
    v-for="(grid, index) in store.state.videomonitor.data.gridList"
    :key="index"
    :style="`grid-area: grid${index}`"
    @click="handleClickGrid(index)"
    @drop="dropEvent($event, index)"
    @dragover.prevent>

    <div class="grid-content">
         <grid class="playwnd" :ref="(el) => (gridList[index] = el)"></grid>
    </div>
</div>

function dropEvent(event, index) {
    event.preventDefault();
    const devId = event.dataTransfer.getData('deviceId');
    console.log(devId)
}

注意：必须给拖放区元素添加 dragover.prevent，才能使 drop 事件正确执行