jQueryUI draggable sets “position: relative” on my

问题:

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

回答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.

回答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.

回答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://stackoverflow.com/a/1324720/3633109