当动态内容发生变化时，jquery ui可拖动的div跳转

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

理想情况下，我希望在内容发生更改后，任何捕捉的关系都会继续保留。否则，如果div位置简单地忽略了其他div的大小变化，那就太好了。

这里是一个jsfiddle你可以看到我的意思。

2012-06-27 Abe

只是为了澄清。您希望所有框的位置都是静态的，但要改变它们的大小。所以当一个变得更大时，两个div之间会有一个覆盖层？ – Fermis

完美的解决方案是保持折断的关系。因此，如果div A的左上角与B的右上角对齐，那么在调整大小之后他们会保持这种状态。第二个最好的解决方案是，当另一个div的内容发生变化时，没有div移动，即A内容的变化不会导致B的位置发生变化。这两个看起来都是合理直观的界面。第一个更方便一点。 – Abe

您需要定位：绝对的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（如果需要一次加载所有内容，您可能会遇到捕捉）。

警告。我不认为绝对定位divs通常被认为是一种好的做法。你可能想解释你想要做什么，如果适用的话，可以找到更好的解决方案。这个答案可能会做你想做的，但取决于你如何使用它将决定你是否应该。如果它的布局，它可以得到相当的维护沉重，因为你必须重新放置一切再次适合。容器内的每个div盒都将被绝对定位并相互忽略。相对于父项定位子项，就像一个自定义按钮或div后面的菜单，这对绝对定位的项目很有用。

来源

2012-06-27 19:58:32 Recognizer

好问题。我正在设计的页面有几个“窗格”，其中包含用于与静态文本文档进行交互的工具。屏幕房地产方面，有一个大型文件和几个小窗格。各种窗格的大小和用途会有所不同，因此使它们可拖动（和可折叠）是有道理的。想想Adobe Photoshop的界面 - 我的用例非常相似。 – Abe

当动态内容发生变化时，jquery ui可拖动的div跳转

回答

相关问题