Question

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

理想情况下，我希望任何快照关系在内容更改后继续保留。如果失败了，如果div的位置只是忽略了其他div的大小变化，那就太棒了。

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

Answer 1

你需要定位：绝对的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后面的自定义按钮或菜单一样，可以很好地使用绝对定位的项。

当动态内容发生变化时，jquery ui draggable divs会跳转

1 个答案: