3

我正在玩 jquery UI，我注意到一个奇怪的错误。当我单击使 div 可调整大小的按钮时，div 将移动到该按钮下方的位置。

可调整大小的.html：

<html>
    <head>
        <link href="my.css" rel="stylesheet" type="text/css"/>
        <link href="jquery-ui.css" rel="stylesheet" type="text/css"/>
        <script type="text/javascript" src="jquery.js"></script>
        <script type="text/javascript" src="jquery-ui.js"></script>
        <script>
        function makeResizable() {
            $("#divRes").resizable();
        }
        </script>
        <style>
        </style>
</head>
<body>
        <br><br><br><br><br><br><br><br><br><br>
        <button onclick="makeResizable();">Make Resizable</button>
        <div id="divRes" class="MyDiv"></div>
</body>
</html>

我的.css：

.MyDiv {
    position: absolute;
    left: 50px;
    top: 50px;
    height: 100px;
    width: 100px;
    padding: 0px;
    margin: 0px;
    z-index: 1;
    background-color: cyan;
}

因此，只要我单击 make resizable 按钮，div 就会变得可调整大小，但它也会在按钮下方垂直移动。

奇怪的是：如果我从 my.css 中删除 css 并将其内联放置在

<style>
.MyDiv {
    position: absolute;
    left: 50px;
    top: 50px;
    height: 100px;
    width: 100px;
    padding: 0px;
    margin: 0px;
    z-index: 1;
    background-color: cyan;
}
</style>

或者，如果我将 div 的声明更改为：

<div id="divRes" class="MyDiv"></div>

至

<div id="divRes"></div>

和 my.css 到

#divRes {
    position: absolute;
    left: 50px;
    top: 50px;
    height: 100px;
    width: 100px;
    padding: 0px;
    margin: 0px;
    z-index: 1;
    background-color: cyan;
}

问题不会发生。

但当然，这样做既不受欢迎又愚蠢。该问题无法在 jsfiddle 中重现，因为显然所有 css 都是内联的。如有必要，我可以在线上传两个版本的文件。

jQuery版本：

jQuery UI - v1.8.20 - 2012-04-30

jQuery v1.7.2 jquery.org/license

提前感谢您的任何意见。

编辑：刚刚用 jquery-ui 1.30.3 和 jquery 1.9.1（最新）对其进行了测试。问题仍然存在，所以它不是由于它的旧版本。

EDIT2：我在这里上传了文件http://speedy.sh/eBPea/resizable.zip

resizable.htm：演示问题

resizable2.htm：如果我不使用 CSS 类（不是选项），问题不会出现

resizable3.htm：如果我在 html 文件中包含 CSS 类（不是选项），则不会出现问题

4

3 回答 3

4

这似乎是CSS的问题。

可调整大小的插件将类添加ui-resizable到您的元素中，默认情况下它在 jQuery UI 中带有这种样式：

.ui-resizable {
    position: relative;
}

这会导致问题，因为您的 CSS 具有position: absolute并且 被覆盖。为防止出现此问题，请将此规则添加到您的 CSS 文件中：

.MyDiv.ui-resizable {
    position: absolute;
}

或将.MyDiv定义更改为：

.MyDiv {
    position: absolute !important;
}
于 2013-08-07T12:34:26.483 回答
1

我有同样的问题。没有一个答案对我有用。

我的 div 的宽度从 200px 开始，当我将鼠标从东方调整大小时，宽度立即下降到 170px。我将问题追溯到第 302 和 303 行，并将resizable.js其更改el.width()为el.outerWidth()

线路：

this.size = this._helper ? { width: this.helper.width(), height: this.helper.height() } : { width: el.outerWidth(), height: el.height() };
this.originalSize = this._helper ? { width: el.outerWidth(), height: el.outerHeight() } : { width: el.outerWidth(), height: el.height() };
于 2015-07-02T01:17:34.983 回答
0

正如您在这个 jsfiddle 中看到的那样，它应该可以工作：

HTML

<button id="resizeBtn">Make Resizable</button>
<div id="divRes" class="MyDiv"></div>

JS

$('#resizeBtn').click(function() {    
    $("#divRes").resizable();
});

CSS

.MyDiv {
    position: absolute;
    left: 50px;
    top: 50px;
    height: 100px;
    width: 100px;
    padding: 0px;
    margin: 0px;
    z-index: 1;
    background-color: cyan;
}

http://jsfiddle.net/GfczQ/

于 2013-07-23T20:54:10.270 回答