jQuery可调整大小()对象无法缩回

Question

我不明白为什么这个不起作用。我有一个带有iframe的div。我对div应用了jQuery的resizable()方法，并将“alsoResize”选项设置为我的iframe。代码实现如下：

$("#my-frame-wrapper").resizable({
    alsoResize : '#myframe'
});

基本上，我试图直接将resizable（）实现到iframe中，但它不起作用，所以我尝试了这种方法。

问题是：

如果我拉伸div，它可以正常工作（调整大小），但它不想缩回（如果我拖回）。 相反，它在Chrome中完全失控，并且在每次鼠标移动时开始上下弹跳（非常烦人，我必须添加）。

我漏掉了什么吗？ 有其他人遇到过这个问题吗？

- Sthe

Answer 1

在iframe元素内部的鼠标事件不能传递到外部，所以当你拖拽回来时，JQuery UI不会做出反应。

为了防止iframe捕获鼠标事件，在拖拽开始时可以添加一个遮罩层div。

html:

<div id="my-frame-wrapper">
    <iframe id="my-frame" src="http://jsfiddle.net/"></iframe>
    <div id="mask"></div>
</div>

CSS：

#my-frame-wrapper {
    width:200px;
    height:100px;
    position:relative;
}
#my-frame {
    width:100%;
    height:100%;
}
#mask {
    position:absolute;
    top:0;
    left:0;
    margin:0;
    padding:0;
    width:100%;
    height:100%;
    display:none;
}

js:

$(function(){
    $("#my-frame-wrapper").resizable({
        start: function(event, ui) {
           $("#mask").css("display","block");
        },
        stop: function(event, ui) {
           $("#mask").css("display","none");
        }
    });
});

请查看jsfiddle。

- clowwindy

---

这个可以运行，但我并不完全理解它。你能否请解释一下为什么 div 遮罩可以防止 iframe 捕获事件？ - vanval