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:fle
·
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 事件正确执行
更多推荐
已为社区贡献1条内容
所有评论(0)