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

上一篇:git stash误使用drop删掉本地保存,恢复代码一次记录


下一篇:Python pandas.DataFrame.drop函数方法的使用