jquery - 调整两个 iframe 的大小会失去对鼠标拖动的关注

问题描述

我有两个水平的 iframe（一个在另一个之上）。当我手动调整顶部 iframe 的大小时，另一个会相应地调整大小。

但是当我向下拖动鼠标时，它也不起作用。只有当我拖得很慢时它才有效。不知何故，它失去了对底部 iframe 的关注。我已将底部 iframe 变小，以查看当我将鼠标拖到它的 DIV 上时它工作得很好。

如何使用鼠标向上和向下拖动相同？

头

    <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>

标签： jqueryiframeresizable

jquery - 调整两个 iframe 的大小会失去对鼠标拖动的关注

问题描述

解决方案

推荐阅读