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 ;-)

Doughman

What version are you using? And how are you initializing it? Draggable supports both absolute and relative positioning. Double checking the code, by default the only reason it should be set to relative is if no position type is set on the element. – Diaconicon

Cheers Nal. I'm using 1.7.2. The position is set in the class, not on the element, and without the draggable on the element, I can see in the Chrome debugger that it is "position: absolute" computed. And it works. When I apply the draggable to it, "position: relative" is applied to the element directly. This may be a jquery bug then, where it should be using getComputedStyle to find the position. – Doughman

That's a really old version. You should probably upgrade to 1.8 and see if that makes a difference. Are you using the helper draggable option or any other options? But still, the only line where position:relative is set is here – Diaconicon

I came across the same problem today. The reason was I was applying draggable() on a dynamically created element. I was 'later' appending it to dom. The element should be in dom when you apply draggable() (if style is being applied by a class). In short, when it finds no position attached with the element , it adds relative. – Pozzy

This issue is present exactly as described above in 1.10.2 and is manifested in ie10 on Win7 and the element has already been added to the DOM with a class specifying position:absolute and values for top and left when draggable is applied. Setting $("#foo")[0].style.positon=""; immediately after calling draggable resolves the effective problem even if I really don't know why this happens. – Mann

No I tell a lie, the classes were applied immediately after the call to draggable and you are 100% correct, this stops it from setting position. – Mann

I saw this behaviour on Chrome and Safari but not in Firefox. Jashwant's suggestion above fixed the problem immediately for me in all 3 browsers. – Minuteman

Answer 1

"I came across the same problem today. The reason was I was applying draggable() on a dynamically created element. I was 'later' appending it to dom. The element should be in dom when you apply draggable() (if style is being applied by a class). In short, when it finds no position attached with the element , it adds relative." - Jashwant

Firs do: .append(jElement) Then: jElement.draggable()

For some reason Jashwant put his answer in the comment to the question. So I thought it will be convenient to other to repost it here.

Fritzfritze

Answer 2

It also happened to me, but only on Chrome. Reason?

It was like this:

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

Then I removed the containment parameter, like this:

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

So it's about the Browser (Chrome in this case), which sets position to Relative when you specify which containment the element will be draggable.

Invariant

Answer 3

in my case it seems to be a race condition between the stylesheets and javascript loading...

i realized i'd made the mistake of including the stylesheets AFTER the javascript in the document head. they should be included BEFORE the javascript because $(document).ready() does not account for the CSS being loaded by the browser: https://mcmap.net/q/33022/-is-document-ready-also-css-ready

Violent