Question

嘿所有人。我有以下代码：

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

另请注意，如果将元素更改为具有相对位置（在.demo样式中添加位置：相对！重要），则可以防止折叠，但在开始调整大小时元素会“跳转”或者拖动。另一种奇怪的行为。谢谢你的帮助。

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以防止＆＃34;跳跃＆＃34;你有时会看到的。在停止事件中，反转这些更改。在我的案例中，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明确设置top和left。

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

Answer 5

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

如何防止Resizable和Draggable元素相互折叠？

5 个答案: