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

Posted 2023-05-08

【中文标题】如何防止 Resizable 和 Draggable 元素相互折叠？

【英文标题】：How to prevent Resizable and Draggable elements from collapsing on each other?

【发布时间】：2011-08-27 14:31:14

【问题描述】：

大家好。我有以下代码：

http://jsfiddle.net/g7Cgg/

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

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

【参考方案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: ""
        );
    
);

如您所见，在 resizable start 事件中，将 position 设置为 relative（通过使用 draggable 和 resizable 配合使用，添加了绝对定位）并将 top 和 left 设置为 0 以防止您“跳跃”有时看到。在停止事件中，反转这些更改。在我的情况下有效，YMMV。

【讨论】：

Err... 你不能在 jQuery css 函数中添加 !important。作为一种解决方法，在开始时添加一个具有这些 CSS 规则的类，并在停止时将其删除。

【参考方案2】：

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

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

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

【参考方案3】：

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

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

【参考方案4】：

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

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

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

【参考方案5】：

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

【讨论】：

试过了。没有运气。尝试调整大小时，下部元素仍会折叠在上部元素上。

它崩溃的原因是可以理解的......我的意思是，为了让您能够将元素定位到任何您想要的位置，它必须使用绝对定位，从而将其排除在流程之外。我只是好奇在这个例子中是否有任何方法可以使用可调整大小和可拖动。