0

我想在内容动态变化的页面中使用 jquery UI 的可拖动对象。不幸的是，当一个 div 的内容发生变化时，其他 div 也会经常移动。有没有办法防止这种行为？

理想情况下，我希望任何快照关系在内容更改后继续保持。如果做不到这一点，如果 div 位置简单地忽略其他 div 大小的变化，那就太好了。

这是一个jsfiddle，您可以在其中看到我的意思。

4

1 回答 1

0

您需要定位：绝对的 div，而不是相对的。然后，您需要将容器相对定位，以使其中的 div 具有相对于容器的位置。

CSS更新：

#container{
    width:600px;
    margin:auto;
    padding:20px;
    position: relative;
}
.box{
    width:50%;
    padding:20px;
    border:2px solid black;
    position:absolute;
}​

还有其他问题需要您弄清楚。在第一次渲染时，两个框将重叠。您需要预定义顶部/左侧 css 值以阻止它们最初重叠。这将通过 html（您必须事先知道高度）或 javascript（如果一次加载所有内容需要一点时间，您可能会遇到捕捉）来完成。

警告。我不认为绝对定位的 div 通常被认为是一种好习惯。您可能想解释您正在尝试做什么，如果适用，可以找到更好的解决方案。这个答案可能会做你想做的事，但取决于你如何使用它会决定你是否应该这样做。如果它用于布局，它可能会变得非常繁重，因为您必须重新定位所有东西以再次适应。容器内的每个 div 框都将被绝对定位并相互忽略。相对于父项定位子项（例如 div 后面的自定义按钮或菜单）是绝对定位项的一个很好的用途。

于 2012-06-27T19:58:32.720 回答