Jquery UI 可拖动绝对而不是相对？答案

【问题标题】：Jquery UI Draggable Absolute Instead of Relative?Jquery UI 可拖动绝对而不是相对？
【发布时间】：2011-10-17 18:51:56
【问题描述】：

我有一个包含一些 jquery 可拖动对象的 div，但是如果我在任何时候从页面中删除这些可拖动对象中的一个，那么这可以移动其余的对象，因为它们是相对定位的。

这是一个展示这个的小提琴： http://jsfiddle.net/VolatileStorm/aNk6e/

我建议的解决方案是可拖动对象应该使用绝对定位而不是相对定位，但是我找不到这样做的方法。有没有办法做到这一点，如果没有，有人能想到解决办法吗？（为了优雅，我不会接受“不要删除其他可拖动的”）。

【问题讨论】：

标签： jquery-ui jquery-ui-draggable

【解决方案1】：

设置元素可拖动时，可以使用jQuery css函数将位置设置为绝对位置。

$(this).draggable().css("position", "absolute");

【讨论】：

设置绝对位置后无法再拖动

【解决方案2】：

将position:absolute 添加到您的元素中。
在调用.draggable之前将它们附加到DOM。

【讨论】：

那之前拯救了我的一天。谢谢。

【解决方案3】：

也许不是最好的想法，但是...您可以使用 positon:relative; 定位所有相关的 div；然后在您的或 $("document").ready() 中包含一个函数调用，如果您使用的是 jQuery，它将遍历每个 div 以将它们的相对位置转换为绝对位置，并将它们设置为左上角将它们更改为位置：绝对。这里唯一的问题是，您希望每个 div 在更新样式之前都具有绝对位置，以免通过迭代改变布局。

【讨论】：

【解决方案4】：

为什么position:absolute 不适合你？

由于绝对定位元素不再是文档流的一部分，因此您的三个<div>s 中的每一个都放置在其包含（定位）元素的0,0 处。因此，work out the starting position of your draggables 由您决定。

【讨论】：

@VolatileStorm：不，它没有。使用position:absolute 查看我的demo——它从未更改为relative。
是的。这就是我删除评论的原因。可以这么说，它在我的“生产代码”中。但不是在你的。然而。如果我在使它可拖动后将位置设置为绝对，那么它保持绝对。我想我应该更加努力，哈哈。谢谢！
为了澄清场景，如果您通过css/inline将可拖动元素的位置设置为absolute，那么可拖动插件不会为您将其设置为内联到relative，您可以确定（或不）起始位置（有助于动态生成的元素）。但是，不要通过 css 定位.ui-draggable，因为这个选择器似乎是在它决定是否应用定位之后添加的。
要补充的另一件事：当父容器设置为position:static 时，这会使父容器停止滚动。要重新启用滚动，只需将其设置为 position:absolute
注意如果他使用的是参数iframeFix:true，那么jquery UI会将其转换为相对定位