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 事件正确执行
如果觉得《vue 拖拽（Drag and Drop）》对你有帮助，请点赞、收藏，并留下你的观点哦！
