6

大家好。我有以下代码：

http://jsfiddle.net/g7Cgg/

如您所见，有 2 个简单的 DIV 相互堆叠。这些 DIV 中的每一个也都设置为可调整大小和可拖动的。但是，请注意，当您尝试调整第一个元素的大小时，第二个元素会折叠到第一个元素上。据我所知，这是因为 resizable 将元素更改为绝对位置。如何防止这种行为？是否可以在保留拖动元素的能力的同时调整元素的大小？

另请注意，如果您将元素更改为具有相对位置（在 .demo 样式中添加 position:relative !important），它可以防止折叠，但是当您开始调整大小或拖动时，元素会“跳跃”。另一个奇怪的行为。谢谢你的帮助。

4

5 回答 5

4

在我的具体情况下，这是我为解决它所做的：

resizeableObj.resizable({
    start: function(event, ui) {        
        resizeableObj.css({
            position: "relative !important",
            top: "0 !important",
            left: "0 !important"
        });
    },
    stop: function(event, ui) {
        resizeableObj.css({
            position: "",
            top: "",
            left: ""
        });
    }
});

如您所见，在 resizable start 事件中，将位置设置为相对（通过同时使用可拖动和可调整大小，添加了绝对定位）并将顶部和左侧设置为 0，以防止您有时看到的“跳跃”。在停止事件中，反转这些更改。在我的情况下工作，YMMV。

于 2011-06-01T16:48:29.313 回答
2

找到了一个更简单的解决方案（适合我的需要）；

在 jquery-ui.css 中，设置所需的位置并添加 !important 以确保它保持不变：

.ui-resizable {position: fixed !important} /* fix jquery's position absolute on resizing */
于 2014-04-28T09:14:52.997 回答
2

使用此代码将元素保持在窗口空间内，而无需在拖动时滚动：

$("#draggable").draggable({containment:"window", scroll: false})

于 2017-11-10T10:22:44.530 回答
1

Chrome 开发人员工具表明 jQuery UIstyle="position:relative"在用户拖动/调整大小时使用该属性。这将覆盖.demo{position:absolute}CSS 中的任何内容。

解决方法是设置您自己的style="position:absolute"（您可以为此使用 jQuerycss()方法），然后为每个 div 显式设置顶部和左侧。

 $('.demo').css({position:"absolute"});
于 2012-03-29T23:23:47.783 回答
0

只需将#container 设置为position: relative;. http://jsfiddle.net/g7Cgg/1/

于 2011-05-17T21:57:40.903 回答