IE下object遮挡div的解决方案

来源：互联网发布：天龙八部2全套源码编辑：程序博客网时间：2024/05/17 08:19

一、现象：

在项目开发的过程中，有个模块需要实现将数据拖拽到外部的一个插件窗口上，在其他浏览器上表现正常，但是在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中了");                }            });

④最终效果图

1 0