如何防止可调整大小和可拖动元素相互折叠？

Question

嘿大家。我有以下代码：

http://jsfiddle.net/g7Cgg/

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

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

Answer 1

在我的具体情况下，这是我修复它的方法：

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: ""
        });
    }
});

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

Answer 2

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

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

.ui-resizable {position: fixed !important} /* fix jquery's position absolute on resizing */

Answer 3

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

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

Answer 4

Chrome 开发者工具指示 jQuery UI 在用户拖动/调整大小时使用 style="position:relative" 属性。这将覆盖 CSS 中的任何 .demo{position:absolute}。

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

 $('.demo').css({position:"absolute"});

Answer 5

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