#9388 closed bug (invalid)

Opened June 20, 2013 06:02PM UTC

Closed July 06, 2013 08:54AM UTC

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

Reported by: Kerrick Owned by: Kerrick
Priority: minor Milestone: none
Component: ui.draggable Version: 1.9.2
Keywords: Cc:
Blocked by: Blocking:
Description

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.

Attachments (0)
Change History (5)

Changed June 20, 2013 06:05PM UTC by Kerrick comment:1

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

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/

Changed June 21, 2013 01:41AM UTC by tj.vantoll comment:2

owner: → Kerrick
status: new → pending

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?

Changed June 21, 2013 06:26PM UTC by Kerrick comment:3

status: pending → new

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.

Changed June 21, 2013 10:28PM UTC by tj.vantoll comment:4

status: new → pending

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?

Changed July 06, 2013 08:54AM UTC by trac-o-bot comment:5

resolution: → invalid
status: pending → closed

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!