Biegral Blog

一、现象：

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

    ④最终效果图