js鼠標拖拽事件碰到iframe會卡頓

js寫的鼠標拖拽事件，當鼠標滑到iframe區域時，會卡住。我理解的應該是因爲iframe框中爲加載別的頁面，鼠標在iframe框時，相當於處在別的頁面中，所以拖拽失效。

1.測試代碼：

<div id="draggable">
    <iframe src="http://www.baidu.com"></iframe>
</div>

2.解決思路：拖曳時在iframe上方放置一個透明的圖層用來覆蓋，這樣拖曳過程其實是在這個透明的圖層上進行的，所以就不會存在卡頓問題

$("#draggable").resizable({
    helper: "widget_resizable_helper",
    start: function( event, ui ) {
        $("iframe").each(function() {
        　　 $("<div class='ui-resizable-iframeFix' style='background: #fff;'></div>")
            .css({
            width: this.offsetWidth+"px", height: this.offsetHeight+"px",
            position: "absolute", opacity: "0.001", zIndex: 1000
            })
            .css($(this).offset())
            .appendTo("body");
        });
    },
    stop:function(){
        $("div.ui-resizable-iframeFix").each(function() {
        this.parentNode.removeChild(this);
        });
    }
});

3.整體思路就是想方設法擋住iframe，暫時不知道iframe爲什麼會導致拖曳卡頓，所以請知曉原理的大神告知，萬分感謝！