After implementing an innovative AngularJS directive to enable element dragging, I decided to apply it to a div element that will serve as a floating menu on my website.
A curious issue arises when I attempt to drag a draggable div that is nested within an element with specific padding values or has margin attributes set. During mouse movement, the draggable div suddenly jumps from its original position to an offset, which is not what I desire.
To illustrate this problem, I have prepared an example demonstration linked below. My question now is: How can I ensure smooth movement of my draggable divs without removing padding/margin attributes?
http://plnkr.co/edit/ZwiDo9gx5nAcz4Z0daTo?p=preview
<body style="padding-top:20%">
<div class="col-lg-2 col-sm-3 col-xs-4" style="background-color:black;color:white;z-index:2;" ng-draggable="vm.dragOptions">
<span class="col-xs-12 modal-header divheader" style="cursor:pointer">
List of objects
</span>
<div style="margin:0px;" class="padding">
...
</div>
</div>
UPD
Although @user6028084 provided a snippet that resolved the issue in the Plnkr, it unfortunately interferes with my CSS styles in the actual application. Therefore, I welcome any alternative solutions that may be proposed.
.ng-isolate-scope{
position:absolute;
}