Drag breaks with absolute positioning

[diimpp]

I'm experiencing weird dragging, when parent element have absolute positioning. Here is an example http://codepen.io/anon/pen/zxpvVa All I did is added to container

position: absolute;

Here is essentially the same issue, but this draggable uses jquery ui. https://github.com/angular-ui/ui-sortable/issues/97 Issue is repeating in ng-sortable also, but not in rubaxa/Sortable. (Both are non jquery)

Do you have any ideas how it could be solved?

[timbell]

I had a similar issue trying to use sortable-view within a ui.bootstrap.modal. The modal class has position fixed which was causing the sv-helper clone to be offset by the parent margins. (in chrome + firefox, it worked ok in ie 11.)

I fixed by adding the sv-helper clone to the body rather than the parent:

if(!moveExecuted){ $element.parent().prepend(clone); body.prepend(clone); ... }

It fixes my issue but I'm not sure whether the sv-helper clone needs to be added to the parent for some use cases???

[timbell]

The actual cause of the problem I had is detailed here: http://meyerweb.com/eric/thoughts/2011/09/12/un-fixing-fixed-elements-with-css-transforms/ The problem isn't the position fixed on the modal class but rather the transform on the modal-dialog class that Bootstrap uses to centre its modals.

[hanthomas]

+1 - Solution @timbell recommends fixes a bunch of positioning problems I had in my application. I recommend this as a PR if anyone hasn't already done so.

[aborchew]

+1 on this solution. To be honest I am not taking the time to look into whether this is a full-fledged solution or not, but it did solve my (our) specific issues. Thanks @timbell !

[rickhopkins]

I changed the styles for the modal-dialog to this and it solved my issue. Basically I read @timbell's post and thought I'd just try taking off the transform and transition. Seems to work although it prevents the modal window from sliding in from the top. Oh well...

div.modal-dialog {
    -webkit-transform: none !important;
    -ms-transform: none !important;
    -o-transform: none !important;
    transform: none !important;

    -webkit-transition: none !important;
    -o-transition: none !important;
    transition: none !important;
}

[r20]

I was using @timbell's solution but that ended up causing css style/formatting issues (since the clone become a child of body instead of original's parent). I decided the preferred hack for me was to get rid of modal animations using @rickhopkins solution.

[iqidan]

position: absolute;不占据文档空间，var containmentRect = closestElement.call($element, opts.containment)[0].getBoundingClientRect();获取高度有问题，现在改为客户端内容高度，拖动不会超过客户端的内容高度范围 ==》 var containments = closestElement.call($element, opts.containment); var containmentRect = containments[0].getBoundingClientRect(); containmentRect = { top:containmentRect.top, left:containmentRect.left, width:containmentRect.width, height:containments[0].clientHeight }