IE下object遮挡div的解决方案

本文主要是介绍IE下object遮挡div的解决方案，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

一、现象：

   在项目开发的过程中，有个模块需要实现将数据拖拽到外部的一个插件窗口上，在其他浏览器上表现正常，但是在IE下出现了div拖拽到控件时被object遮挡的问题。现象如下:

     

二、出现问题的原因和解决思路

    出现这种现象的原因：

        object标签不在dom文档流里面，浏览器在解析的时候先把object放置在最上层，然后依次解析dom文档，放在下层，并且在这里使用z-index是无效的。

    解决的思路：

        给要拖拽的div上加一层透明的iframe标签，这样会拖拽两层，div(下面)+iframe(层)，事件和数据的传递也是依靠底层的div来实现，只不过给用户看到的是iframe的表现。

三、具体步骤和修改后效果图

    ①添加iframe标签

<div style="position:relative;"><div class="face1" style="width:150px;height:50px;background:red;z-index:9999;margin-top:13px;"><iframe id='iframebar' src="about:blank" frameBorder=0  marginHeight=0 marginWidth=0 style="position:absolute;visibility:inherit; top:0px;left:0px;height:45px;width:140px;z-index:-1;background:green;filter='progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0)'"></iframe>test2</div></div>

    ②添加iframeFix属性解决不能放置的问题

 $(".face1").draggable({helper: "clone",iframeFix: true });

    ③添加drop事件

$(".box").droppable({accept: ".face1",drop:function(event,ui){alert("放置在box中了");}});

    ④最终效果图

这篇关于IE下object遮挡div的解决方案的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---