如何解决调整两个 iframe 的大小会失去对鼠标拖动的关注
我有两个水平的 iframe(一个在另一个上方)。 当我手动调整顶部 iframe 的大小时,其他 iframe 也会相应地调整大小。
但是当我向下拖动鼠标时,它也不起作用。只有当我拖得很慢时它才有效。不知何故,它失去了对底部 iframe 的关注。我已将底部 iframe 缩小,以查看当我将鼠标拖动到其 DIV 上时效果很好。
如何让鼠标上下拖动一样?
试试:http://jsfiddle.net/ngjp0o1L/
头部
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
<style>
#parent {
position: absolute;
height: 90%;
margin: 0;
padding: 0;
width: 95%;
}
#div1 {
position: relative;
height: 50%;
background-color: yellow;
margin-bottom: 10px;
}
#div2 {
position: relative;
height: 50%;
background-color: green;
z-index: 4;
}
</style>
身体
<div id="parent">
<div id="div1"> <iframe id="iframe1" src="http://www.example.com/" style="width:100%; height:100%;"></iframe> </div>
<div id="div2"> <iframe id="iframe2" src="http://www.example.com/" style="width:80%; height:100%;"></iframe> </div>
</div>
<script>
$("#div1").resizable({
start: function (event,ui) {
ui.element.append($("<div/>",{
id: "iframe-barrier",css: {
position: "absolute",top: 0,right: 0,bottom: 0,left: 0,"z-index": 10
}
}));
},stop: function (event,ui) {
$("#iframe-barrier",ui.element).remove();
},resize: function (event,ui) {
$("iframe",ui.element).width(ui.size.width).height(ui.size.height);
}
});
$('#div1').resize(function () {
$('#div2').height($("#parent").height() - $("#div1").height());
});
</script>
解决方法
我解决了! 附加的 DIV 仅涵盖顶部 iframe/div。 我把它做得更大以覆盖底部 iframe/div,它不再失去焦点。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。