Javascript AngularJS-可拖动引导模式

我对情态动词使用AngularJS指令，使它们可以拖动

这是指令

在演示中，您可以清楚地看到，如果拖动它（尤其是向左和向右），它会比鼠标慢。我理解为什么会发生这种情况（JavaScript计算相对于其起始位置的位置，因此在我的1920x1080屏幕中，它在x轴上从-1200px到1920px）。我知道有必要使用偏移量而不是位置，但经过多次尝试后，我没能做到这一点

这是相关的JavaScript代码：

element.on('mousedown', function (event) {
  // Prevent default dragging of selected content
  event.preventDefault();
  startX = event.screenX - x;
  startY = event.screenY - y;
  $document.on('mousemove', function mousemove(event) {
      y = event.screenY - startY;
      x = event.screenX - startX;
      element.css({
         top: y + 'px',
         left: x + 'px'
      });
   });
});

我怎样才能使它依赖于偏移量并与鼠标一起移动而不减慢速度呢？

试试这个：。我已经硬编码了2个值，你不应该这样做。您的“错误”是将draggable指令放在了错误的元素中。我在

中添加了draggable指令，我相信这就是您想要移动的元素

我还将

元素.css（{

更改为

element.css({
        top: event.clientY - 30 + 'px',
        left: event.clientX - 10 + 'px'
      });

它使用的是.clientX/Y，这是鼠标的实际位置，无需进一步计算。

试试这个：。我已经硬编码了2个值，你不应该这样做。你的“错误”是因为您将draggable指令放在了错误的元素中。我将draggable指令添加到了

，我相信这就是您要移动的元素

我还将

元素.css（{

更改为

element.css({
        top: event.clientY - 30 + 'px',
        left: event.clientX - 10 + 'px'
      });

---

它使用的是.clientX/Y，这是鼠标的实际位置，不需要进一步计算。

你做错了，是你移动了“所有东西”。如果你把“鼠标”注释掉事件，您可以通过devtools看到，您正在移动模态窗口的容器。我猜您只想移动内部元素。您所做的错误是，您正在移动“所有内容”。如果您注释掉“mouseup”事件，您可以使用devtools看到您正在移动模态窗口的容器。我猜您只想移动内部元素。您建议的拖动效果良好且可靠，但有一个问题：它忽略了拖动的位置。（例如，如果我尝试从模态标题的中间拖动，它会“跳跃”有没有办法解决这个问题？我试图将源代码中的操作（考虑到这一点）与您的解决方案混合在一起，但得到了一个糟糕的体验。您建议的拖动效果良好且可靠，但有一个问题：它忽略了拖动的位置。（例如，如果我尝试从模式标题的中间拖动，它会“跳”到我的鼠标坐标，这很奇怪。）有办法解决这个问题吗？我尝试将源代码中的操作（考虑到这一点）与您的解决方案混合在一起，但得到了一个糟糕的体验。