Draggable with parent containment and margin

[ghusse]

On jQuery UI 1.8.10

With 2 div elements, the parent has a fixed width (600px), the child element with a smaller width value. Both parent and child have the same height.

The child element has a left and right margin of about 5px, and is made draggable with the following options:

 {
  axis:"x",
  containment: "parent"
 }

When I dragg the child element on left or right, at the very end, child's magin is ignored on dragging. But once the element is dropped, it is moved according to the margin.

[Guillaume Gautreau]

Draggable: modify margins of the containment according to the margin of the draggable element. Fixed #7084 - Draggable with parent containment and margin

Changeset: 3a0ec399cdd19c7e7b11934aef559cfa6b8f8258

[Guillaume Gautreau]

Draggable: modify margins of the containment according to the margin of the draggable element. Fixed #7084 - Draggable with parent containment and margin (cherry picked from commit 3a0ec399cdd19c7e7b11934aef559cfa6b8f8258)

Changeset: a067dfa8a22f9705bd062cfd651feb0bff3e3cf6

[mofle]

This brings a regression in Webkit, that prevents me from dragging: ​http://jsfiddle.net/mofle/kMgB3/

Works in Firefox, but not Webkit.

1.8.10 worked in both.

[rdworth]

This is caused by ​https://bugs.webkit.org/show_bug.cgi?id=13343 which is now fixed (chromium and webkit nightlies since late Feb 2011) but of course the issue is still present in many supported WebKit browsers.

There's a workaround listed on the chromium bug ​http://code.google.com/p/chromium/issues/detail?id=23816 but it involves appending the element to an element with display:absolute. That seems a bit much.

I found a feasible workaround by setting display: inline-block on the element. That could be done temporarily just to get the correct computed marginRight value even. May need to raise with jQuery core dev team as this is really a .css() issue not a draggable issue, but reopening until it's resolved or worked around.

[rdworth]

Blocked by ​http://bugs.jquery.com/ticket/3333#comment:17

[rdworth]

Fix in ​http://blog.jquery.com/2011/03/24/jquery-1-5-2-rc-1-released/ Test page at ​http://jsfiddle.net/rdworth/5a2BZ/1/ We'll close this ticket once 1.5.2 is final.

[Vizor]

On document or window as containment the problem persists. example: ​http://jsfiddle.net/5FJpm/2/

[mikesherov]

Thanks for taking the time to contribute to the jQuery UI project! I can no longer reproduce the issue using the latest jQuery and jQuery UI using the info provided. ​http://jsfiddle.net/dVeeh/

If you can still reproduce it, please feel free to reply to this ticket with a test case showing the problem. Thanks!