调整两个 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，它不再失去焦点。