您好,欢迎访问代理记账网站
  • 价格透明
  • 信息保密
  • 进度掌控
  • 售后无忧

可以拖拽的元素如何在iframe 中释放(无法触发drop事件)?

可以拖拽的元素如何在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了


分享:

低价透明

统一报价,无隐形消费

金牌服务

一对一专属顾问7*24小时金牌服务

信息保密

个人信息安全有保障

售后无忧

服务出问题客服经理全程跟进