使用jQuery UI Resizable时出现奇怪的错误

Question

使用jQuery UI Resizable时出现奇怪的错误

3

我正在尝试使用jQuery UI，并注意到一个奇怪的bug。当我点击一个按钮使一个div可调整大小时，这个div会移动到该按钮下方的位置。

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

my.css:

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

当我点击“使可调整大小”按钮时，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>

to

<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.com | jquery.org/license 非常感谢您提供的任何意见。

编辑：刚刚使用了jquery-ui 1.30.3和jquery 1.9.1（最新版本）进行了测试，问题仍然存在，因此不是由于旧版本引起的。

编辑2：我已经在这里上传了文件http://speedy.sh/eBPea/resizable.zip resizable.htm：演示了问题

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

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

- MirrorMirror

不想说显而易见的话，但是你的 HTML 文件中有 DOCTYPE 声明吗？你这里的代码示例缺少它。 - Uooo

你应该能够在http://jsfiddle.net/上重新创建，只需在外部资源中放置CSS文件和JS文件的URL即可。 - apaul

3个回答

1

我曾经遇到同样的问题，但所有答案都对我无效。

我的div宽度开始是200px，当我移动鼠标从东侧调整大小时，宽度立即降至170px。我追踪到问题出现在resizable.js的302和303行，将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() };

- DanielRavina

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/

- Kevin Le - Khnle

问题无法在 jsfiddle 中复制，只能使用实际文件。 - MirrorMirror

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Jonathan Naguin · Accepted Answer

似乎这是CSS的问题。

可调整大小插件会向您的元素添加类ui-resizable，jQuery UI默认情况下带有此样式。

.ui-resizable {
    position: relative;
}

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

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

或者将 .MyDiv 的定义改为以下内容：

.MyDiv {
    position: absolute !important;
}