Question

我不明白为什么这不起作用。我有一个内部有iframe的div。我将jQuery resizable（）应用于div并将“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。

jQuery resizable（）对象不会缩进

1 个答案: