Question

我正在使用 AngularJS 指令进行模态处理，以使它们可拖动。

This是指令。

在演示中，你可以清楚地看到，如果你拖动它（特别是左右），它比你的鼠标慢。我理解为什么会发生这种情况（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个硬编码值，你不应该这样做。你的错误＆＃34;是你把draggable指令放在错误的元素中。我将draggable指令添加到<div class="modal-content">，这是我认为你想要移动的元素。

我还将您的element.css({更改为

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

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

AngularJS - 可拖动的引导模态

1 个答案: