jquery-ui - jQueryUI draggable sets "position: relative" on my draggable divs

Question

I'm having an odd problem with jQuery draggable this morning, I wonder if anyone else has come across this.

I have many small divs inside a large div. They are absolutely positioned: "position:absolute" in CSS for their class, with the actual position itself calculated and set in JS on demand.

Now I'm adding functionality to allow these divs to be draggable.

But, as soon as I make one draggable, it is given "position:relative" directly on the element, which as you might imagine, seriously messes up the on screen position.

Does anyone know why it changes the "position" like this or how to tell it not to?

EDIT:

Just realised there is a rather obvious answer staring me in the face - !important on my position:absolute! This seems to fix it. BUT I'm still interested if anyone knows why it sets "position: relative" like this (and doesn't either make it configurable or check first if it needs position)...I'm wondering what problems I've just stored up for myself ;-)

Answer 1

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

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

出于某种原因，Jashwant 将他的答案放在了对该问题的评论中。所以我认为其他人在这里转发它会很方便。

Answer 2

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

是这样的：

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

然后我删除了包含参数，如下所示：

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

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

Answer 3

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

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