在專案開發的過程中，有個模組需要實現將資料拖拽到外部的一個外掛視窗上，在其他瀏覽器上表現正常，但是在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中了");
                }
            });

    ④最終效果圖