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

正如你所看到的，有2个被堆叠在彼此上方的简单资料核实。每个DIV也设置为可调整大小和可拖动。但是，请注意，当您尝试调整第一个元素的大小时，第二个元素将折叠到第一个元素上。从我所看到的情况来看，这是因为可调整大小会将元素更改为绝对位置。我怎样才能防止这种行为？是否可以调整元素的大小，同时保留拖动元素的能力？请注意，如果您将元素更改为具有相对位置（在.demo样式中添加位置：relative！important），它可以防止崩溃，但是当您开始使用元素时，元素会“跳跃”调整大小或拖动。另一个奇怪的行为。谢谢你的帮助。

来源

2011-05-17 naivedeveloper

在我的特定情况下，这里是我做过什么来解决这个问题：

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。

来源

2011-06-01 16:48:29 naivedeveloper

Err ...您无法在jQuery css函数中添加重要！作为一种解决方法，在启动时添加一个具有！important的CSS规则的类，并在停止时将其删除。 – Jide 2014-01-22 19:21:11

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

来源

2011-05-17 21:57:40 Zlatev

试过了。没有运气。尝试调整大小时，较低的元素仍会在上层元素上折叠。 – naivedeveloper 2011-05-17 22:07:11

如果固定高度适合您，请尝试http://jsfiddle.net/g7Cgg/4/ – Zlatev 2011-05-17 22:12:12

为什么它会崩溃是可以理解的......我的意思是，为了让您能够将元素定位到任何位置，它必须使用绝对定位，从而将其排除在流程之外。我只是好奇，在这个例子中有什么方法可以使用resizable和draggable。 – naivedeveloper 2011-05-17 22:17:59

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

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

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

来源

2012-03-29 23:23:47 kippsoftware

找到一个更简单的解决方案（这符合我的需要）; ！

内jQuery的ui.css，设置所需的位置，并添加重要，以确保它保持：

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

来源

2014-04-28 09:14:52

使用此代码，以保持窗口空间内的元素，而不同时拖动滚动：

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

来源

2017-11-10 10:22:44

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

回答

相关问题