可以拖拽的元素如何在iframe 中释放(无法触发drop事件)?
最简单的解决方式:通过css 方式在iframe 上覆盖一层同等宽高的div 并设置透明! 然后在这成div上绑定 drop事件
<tempalte>
<div @dragover="dragover($event)">
可拖动元素
</div>
<div class="father">
<iframe>
src="url"
width="100%"
height="100%"
</iframe>
<div class="copy" @drop="drop" >
</div>
</div>
</tempalte>
<style>
.father{
position: relative;
}
.copy{
position: absolute;
top:0%;
left:0%;
opacity:0;
}
</style>
<script>
export default {
methods:{
//浏览器块(div等)默认禁止拖拽事件的拖放操作,所以若想监听drop操作,需要在dragover中阻止元素发生默认的行为,然后就可以监听到drop了
dragover(e) {
e.preventDefault();
},
//释放阶段
drop(){
//拖拽完成后要执行的......
},
}
}
</script>
注意:
浏览器块(div等)默认禁止拖拽事件的拖放操作,所以若想监听drop操作,需要在dragover中阻止元素发生默认的行为,然后就可以监听到drop了