我不明白为什么这样不行。我有一个带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。