#9723 closed bug (notabug)

Opened December 30, 2013 01:38PM UTC

Closed August 13, 2014 12:47PM UTC

Last modified November 23, 2016 08:52PM UTC

Draggable: margin should not be used in containment calculation

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

When using a containment on a draggable element, such as:

$('#bar').draggable({
    containment: 'document',
});

and this item contains a margin-left, such as:

#bar {
    margin-left: 80px;
}

it is impossible to drag the element to the left past that margin. Here is a jsfiddle illustrating the issue: http://jsfiddle.net/z866K/2/

Notice that if the ''containment'' option is removed, the element can be dragged anywhere without issues.

Attachments (0)
Change History (4)

Changed December 31, 2013 07:37PM UTC by tj.vantoll comment:1

status: new → open
summary: Draggable element with margin-left won't move left when using a containment → Draggable: margin should not be used in containment calculation

This isn't just the 

document
and it isn't just 
margin-left
: http://jsfiddle.net/tj_vantoll/3aXmZ/.

I would agree that 

margin
should probably not be taken into account for 
containment
calculation. This is potentially related to #6876.

Changed August 13, 2014 12:22PM UTC by mikesherov comment:2

owner: → luqita
status: open → pending

I'm not sure this is a bug or why containment shouldn't take margin into account. That is the explicit point of a margin. It is the amount of space between an element and its parent. It would seem logical that this holds true for its draggable container as well.

luqita, can you provide more information about your use case specifically?

Changed August 13, 2014 12:47PM UTC by mikesherov comment:3

resolution: → notabug
status: pending → closed

luqita, thanks again for the report. After re-reviewing all the code, this is the expected behavior, and we even have unit tests gauranteeing this behavior. If you'd like to not account for margins once you start dragging, you can always do this:

$('#bar').draggable({
    containment: 'document',
    start: function() { 
        $(this).css('margin', 0); 
    }
});

Changed November 23, 2016 08:52PM UTC by hagabaka comment:4

In my case, I'm using margins to set up the initial layout of the draggables rather than positioning them manually. However due to them being draggable, an element's margins will no longer make sense after it's moved from one edge of the container to another. Intuitively, when a draggable is moved, it's taken out of the initial layout similar to how absolutely positioned elements are out of the document flow. That's why I don't think margins should apply for containment calculations.

before:
top       [                                                                              ]
bottom    [   -margin-      draggable      -margin-       other element     -margin-     ]

after:
top       [                                                             draggable        ]
bottom    [   -margin-                     -margin-       other element     -margin-     ]