jQuery UI sets 'position: relative' on elements that were made draggable before being added to the DOM

[Kerrick]

Reduced test case: ​http://jsfiddle.net/Kerrick/CETWC/

In short, I am creating a jQuery element (such as via var el = $('<h1>Test</h1>');), enabling jQuery UI's draggable functionality (el.draggable()), and appending it to the DOM (such as via $('body').append(el);). Instead of using position: absolute as jQuery UI usually does, it puts position: relative into the style attribute of the element.

[Kerrick]

As a comparison test case, it acts as it is supposed to if .draggable() is called after .append(), as seen here: ​http://jsfiddle.net/CETWC/7/

[tj.vantoll]

This is happening because of this check here: ​https://github.com/jquery/jquery-ui/blob/670f650b99103bcea779f8ad0428e05cb7e37053/ui/jquery.ui.draggable.js#L54

this.element.css( "position" ) returns an empty string because the element is not on the DOM, so the subsequent line sets its position to relative.

I'm not sure this is actually a bug because the default value we set on draggable elements is relative. You can see this for yourself if you make the canvas itself draggable on your test case: ​http://jsfiddle.net/tj_vantoll/6K2zd/.

By defaulting to position: relative is this causing any issues for you?

[Kerrick]

As you can see in the test case, the element would have position: absolute applied if it were in the DOM, because of the CSS file. But since jQuery's test is if the element has the CSS (which it cannot if it's not yet in the DOM), rather than if it would have the CSS, it is irrelevant what the CSS file states. The only workaround is to set it via jQuery.css() or to use !important in the CSS, both of which are sub-optimal, hacky solutions that cause issues with clean codebases.

[tj.vantoll]

I'm not sure what we can do here though.

We have to give the element either position: relative or position: absolute, and until the element is placed into the DOM the plugin doesn't know about CSS declared preferences.

We have to pick one or the other, and since position: relative is the default it seems sensical to apply it under these circumstances. $( "<div>" ).draggable().css( "position", "absolute" ) is definitely not ideal though.

Do you have any suggestions for how this could be handled?

[trac-o-bot]

Because we get so many tickets, we often need to return them to the initial reporter for more information. If that person does not reply within 14 days, the ticket will automatically be closed, and that has happened in this case. If you still are interested in pursuing this issue, feel free to add a comment with the requested information and we will be happy to reopen the ticket if it is still valid. Thanks!