jQuery resizable() 对象不缩回

Question

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

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

基本上我是想直接在iframe上实现resizable()，但是不行，所以我尝试了这个方法。

问题是：

如果我拉伸 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。