AngularJS-可拖動的引導程序模態

Question

我對模態使用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'
      });
   });
});

如何使它依靠偏移量並與鼠標一起移動而不減慢速度？

Answer 1

試試這個： http : //plnkr.co/edit/QxIdGj 。 我已經硬編碼了2個值，您不應該這樣做。 您的“錯誤”是您將可拖動指令放入了錯誤的元素。 我在<div class="modal-content">中添加了draggable指令，我認為這是您要移動的元素。

我還更改了您的element.css({

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

它使用的是.clientX / Y，它是鼠標的實際位置，無需進一步計算。