jQuery resizable()对象不退回

Question

我不明白这为什么行不通。我有一个内部带有iframe的div。我将iframe ()应用于jQuery并将"alsoResize“选项设置为我的iframe。下面是它的实现方式：

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

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

问题是：

如果我拉伸div，它可以工作(调整大小)，但它不想缩回(如果我拖回)。取而代之的是，它完全失去了控制(在Chrome中)，它开始在每次鼠标移动时上下弹跳(我必须补充一句，非常恼人)。

我是不是遗漏了什么？还有没有人遇到过这个问题？

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。