可拖动的 div 和填充

Question

我已经实现了一个 AngularJS 指令来使元素可拖动，然后，我将它应用到一个 div 元素，我想将它用作我网站的浮动菜单。

当我将已放置到具有特定填充值的元素中的 draggable div 拖动时出现了我遇到的问题，而且当 draggable div 已设置边距属性。根据这些属性值，在鼠标移动时，我的 可拖动 div 从原始位置跳转到某个偏移量，我不希望它发生。

我创建了一个示例来演示此问题，您可以查看下面的链接。 这是我的问题：我怎样才能使我的 可拖动 div 的移动平滑，不删除填充/边距属性？

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>

更新

@user6028084 提供的下一个 sn-p 帮助解决了 plnkr 中的问题，但在实际应用中它搞砸了我的 css 样式，因此，非常欢迎任何提供其他解决方案的人。

.ng-isolate-scope{
  position:absolute;
}

Answer 1

如果您删除padding-top:20%，它会按照您指出的那样工作。 因此，如果您想保留该金额，则必须按该金额进行补偿。

如果我将相应的数量（在我的情况下为 117 像素）添加到脚本中，它在我的浏览器上可以完美运行

将脚本中的第 56 行更改为以下内容，无论浏览器处于何种分辨率（全屏或最小），它都能正常工作：

startY = e.clientY - elem[0].offsetTop +117;

编辑：或者只是完全删除偏移量

startY = e.clientY;

编辑2： 我改变了获取坐标的方式。 startX 和 startY 的值最初不正确，mousemove 事件中 x 和 y 的分配也是如此。

这是完整工作版本的编辑 plunker：

plunker