如何防止Resizable和Draggable元素相互折叠？
大家好。 我有以下代码：
http://jsfiddle.net/g7Cgg/
如您所见，有两个简单的DIV堆叠在一起。 这些DIV中的每一个也都设置为可resize和可拖动。 但是，请注意，当您尝试调整第一个元素的大小时，第二个元素会折叠到第一个元素上。 从我所看到的，这是因为可resize将元素更改为绝对位置。 我该如何防止这种行为？ 是否可以在保留拖动元素的能力的同时调整元素的大小？
另请注意，如果将元素更改为具有相对位置（在.demo样式中添加位置：relative！important），则可以防止折叠，但在开始resize或拖动时元素会“跳转”。 另一种奇怪的行为。 谢谢你的帮助。
在我的具体情况下，这是我做的修复它：
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: "" }); } }); 如您所见，在可resize的开始事件中，将位置设置为相对（通过使用可拖动和可resize的音量，添加绝对定位）并将顶部和左侧设置为0以防止您有时看到的“跳跃”。 在停止事件中，反转这些更改。 在我的案例中，YMMV。
找到一个更简单的解决方案（符合我的需求）;
在jquery-ui.css中，设置所需的位置并添加！important以确保它保持不变：
.ui-resizable {position: fixed !important} /* fix jquery's position absolute on resizing */
Chrome开发者工具指示jQuery UI在用户拖动/resize时使用style="position:relative"属性。 这将覆盖CSS中的任何.demo{position:absolute} 。
解决方法是设置你自己的style="position:absolute" （你可以使用jQuery css()方法）然后为每个div显式设置top和left。
$('.demo').css({position:"absolute"});
在拖动时使用此代码将元素保留在窗口空间中而不滚动：
$("#draggable").draggable({containment:"window", scroll: false})
只需将#container设置为position: relative; 。 http://jsfiddle.net/g7Cgg/1/