Opened 6 years ago

Closed 5 years ago

Last modified 3 years ago

#9723 closed bug (notabug)

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.

Change History (4)

comment:1 Changed 6 years ago by tj.vantoll

Status: newopen
Summary: Draggable element with margin-left won't move left when using a containmentDraggable: 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.

comment:2 Changed 5 years ago by mikesherov

Owner: set to luqita
Status: openpending

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?

comment:3 Changed 5 years ago by mikesherov

Resolution: notabug
Status: pendingclosed

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

comment:4 Changed 3 years ago by 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-     ]
Note: See TracTickets for help on using tickets.