jQuery UI 可拖动在我的可拖动 div 上设置“位置：相对”

Posted 2023-05-08

【中文标题】jQuery UI 可拖动在我的可拖动 div 上设置“位置：相对”

【英文标题】：jQueryUI draggable sets "position: relative" on my draggable divs

【发布时间】：2012-08-25 01:20:33

【问题描述】：

今天早上我在使用 jQuery draggable 时遇到了一个奇怪的问题，不知道有没有其他人遇到过这个问题。

我在一个大 div 中有许多小 div。它们是绝对定位的：它们的类在 CSS 中的“position:absolute”，实际位置本身根据需要在 JS 中计算和设置。

现在我正在添加允许这些 div 可拖动的功能。

但是，一旦我使一个可拖动的，它直接在元素上被赋予“位置：相对”，正如您可能想象的那样，这会严重扰乱屏幕上的位置。

有谁知道为什么它会像这样改变“位置”或如何告诉它不要这样做？

编辑：

刚刚意识到有一个相当明显的答案在盯着我 - ！对我的立场很重要：绝对！这似乎可以解决它。但是，如果有人知道为什么它会像这样设置“位置：相对”（并且不会使其可配置或首先检查它是否需要位置），我仍然很感兴趣......我想知道我刚刚存储了什么问题为自己准备 ;-)

【问题讨论】：

你用的是什么版本？你是如何初始化它的？ Draggable 支持绝对定位和相对定位。仔细检查代码，默认情况下，它应该设置为相对的唯一原因是元素上没有设置位置类型。

干杯纳尔。我正在使用 1.7.2。位置是在类中设置的，而不是在元素上，并且没有元素上的可拖动元素，我可以在 Chrome 调试器中看到它是“位置：绝对”计算的。它有效。当我将可拖动对象应用到它时，“位置：相对”直接应用于元素。那么这可能是一个 jquery 错误，它应该使用 getComputedStyle 来查找位置。

那是一个非常旧的版本。您可能应该升级到 1.8，看看是否有所不同。您使用的是helper 可拖动选项还是任何其他选项？但是，唯一设置 position:relative 的行是 here

我今天遇到了同样的问题。原因是我在动态创建的元素上应用了draggable()。我“稍后”将其附加到dom。当您应用 draggable() 时，该元素应位于 dom 中（如果样式正在由类应用）。简而言之，当它没有找到与 element 关联的位置时，它会添加 relative。

这个问题与上面 1.10.2 中描述的完全一样，并在 Win7 上的 ie10 中表现出来，并且该元素已经添加到 DOM 中，并带有一个指定位置的类：绝对值和顶部和左侧的值应用可拖动时。设置 $("#foo")[0].style.positon="";即使我真的不知道为什么会发生这种情况，在调用 draggable 后立即解决有效的问题。

【参考方案1】：

“我今天遇到了同样的问题。原因是我在动态创建的元素上应用了draggable()。我'后来'将它附加到dom。当你应用时，元素应该在dom draggable()（如果样式正在被一个类应用）。简而言之，当它发现没有与 element 关联的位置时，它会添加 relative。 - 贾斯旺特

先做：.append(jElement) 然后：jElement.draggable()

出于某种原因，Jashwant 将他的答案放在问题的评论中。所以我想方便其他人在这里转发。

【参考方案2】：

这也发生在我身上，但仅限于 Chrome。原因？

原来是这样的：

$("#div-popup").draggable( handle: ".top", containment: 'document');

然后我去掉了containment参数，像这样：

$("#div-popup").draggable( handle: ".top");

所以它是关于浏览器（在本例中为 Chrome），当您指定哪个容器可以拖动元素时，它将位置设置为相对。

【参考方案3】：

在我的情况下，这似乎是样式表和 javascript 加载之间的竞争条件......

我意识到我犯了一个错误，即在文档头中的 javascript 之后包含样式表。它们应该包含在 javascript 之前，因为 $(document).ready() 不考虑浏览器加载的 CSS：https://***.com/a/1324720/3633109