我不明白为什么这样不行。我有一个带iframe的div。我对div应用了jquery resizable(),并将“alsoresize”选项设置为iframe。这就是它的实现方式:

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

基本上,我试图直接在iframe中实现resizable(),但它不起作用,所以我尝试了这个方法。
问题是:
如果我拉伸div,它可以工作(调整大小),但它不想缩回(如果我向后拖动)。取而代之的是,它完全失控(在chrome浏览器中),每次鼠标移动时它都会上下跳动(我必须加上一个非常烦人的地方)。
我有什么遗漏吗?还有人经历过这个问题吗?

最佳答案

iframe元素中的鼠标事件不会退出,因此jquery ui在您向后拖动时没有反应。
为了防止iframe捕获鼠标事件,可以在开始拖动时添加一个mask 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

10-05 21:07
查看更多