Draggable: margin should not be used in containment calculation

[luqita]

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.

[tj.vantoll]

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.

[mikesherov]

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?

[mikesherov]

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); 
    }
});

[Yaohan Chen]

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-     ]