Question

我有3层div：

iframe区域的背景（不是整个iframe）（z-index：0;）（Resizable的包含）
iframe（z-index：1;）
选择以上iframe（z-index：2;）（可调整大小）

我需要使用背景作为选择的遏制。由于z-index问题，我无法将背景用作Resizable的父级。所以他们是兄弟姐妹。但Resizable似乎忽略了“左派”。和＆＃39; top＆＃39;在这种情况下，它的容器。显示问题的最小示例：

<!doctype html>
<head>
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
    <script src="https://code.jquery.com/jquery-2.1.4.js"></script>
    <script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
    <style>

        html, body, div {
            border: 0;
            margin: 0;
            padding: 0;
        }
        #container {
            position: absolute;
            left: 20px;
            top: 20px;
            width: 300px;
            height: 300px;
            background-color: green;
        }

        #resizable {
            position: absolute;
            width: 150px;
            height: 150px;
            background-color: yellow;
        }

    </style>
    <script>
        $(function () {
            $("#resizable").resizable({
                handles: 'n, e, w, s',
                containment: "#container"
            });
        });
    </script>
</head>
<body>

<div id="container"></div>
<div id="resizable"></div>

</body>
</html>

这种方式有毛刺，特别是在Firefox中：

resize: function(event, ui){
    var pos = $('#container').position(); // May not work. var left = $('#container')[0].offsetLeft works better.
    if (ui.position.left < pos.left) {
        ui.position.left = ui.originalPosition.left;
        ui.size.width = ui.originalSize.width; // Without this width will grow when handle outside container.
    }
    if (ui.position.top < pos.top)  {
        ui.position.top = ui.originalPosition.top;
        ui.size.height = ui.originalSize.height; // Without this height will grow when handle outside container.
    }
}

现在我禁用了＆＃39; w＆＃39;和＆＃39; n＆＃39;我的Resizable手柄。

那么还有另外一种解决方法吗？

如果容器是可调整大小的兄弟，则jQueryUI Resizable忽略包含偏移量（左，上）

0 个答案: