Ticket #1924 (closed bug: fixed)
UI Draggables (and perhaps others?) locations are off when parent element has a border
| Reported by: | rbrackett | Owned by: | paul |
|---|---|---|---|
| Priority: | major | Milestone: | 1.2.2 |
| Component: | ui | Version: | 1.2.1 |
| Keywords: | Cc: | ||
| Blocking: | Blocked by: |
Description
When a draggable's positioned parent (referenced as options.pp) has a border, the new position is off by +1 pixel. This occurs each time the draggable is dragged and is most apparent when using the "grid" option. The error that causes this is repeated in many places, three of which I have identified (though there might be more):
ui.mouse.js, line 167-168:
ui.mouse.js, line 222-223 (same code):
ui.draggable.ext.js, line 198-199:
[won't detail the code here because it's quite long]
In all cases, extra space that might be created by a border is not accounted for in options.po and is in draggable.pos, creating a discrepancy and ultimately moving the draggable over.
An easy solution might be to add in the border width in those places, like so:
this.pos[0] -= o.po.left + (parseInt(jQuery.css(o.pp, "borderLeftWidth")) 0); this.pos[1] -= o.po.top + (parseInt(jQuery.css(o.pp, "borderLeftWidth")) 0);
but that is definitely not ideal, since it is both repeated in multiple places and slow if done multiple times.
Change History
Please follow the bug reporting guidlines and use jsFiddle when providing test cases and demonstrations instead of pasting the code in the ticket.

Whoops, I should note that those line numbers are for revision 3817.