Drag breaks with absolute positioning

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?

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

[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 }