AngularJS-可拖动的引导程序模态

Question

I am using an AngularJS directive for modals, to make them draggable.

This is the directive.

In the demo, you can clearly see that if you drag it (especially left and right) it is slower than your mouse. I understand why this happens (the JavaScript calculates position relative to it's starting position, so in my 1920x1080 screen it goes from -1200px to 1920px on the x axis). And I understand there is a need to use offset instead of position, but after many tries I failed to make it that.

This is the relevant JavaScript code:

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'
      });
   });
});

How can I make it rely on the offset and move together with the mouse and not slower?

Answer 1

Try this one: http://plnkr.co/edit/QxIdGj . I have hardcoded 2 values, which you shouldn't do. Your "mistake" was that you were putting the draggable directive in the wrong element. I added the draggable directive to <div class="modal-content"> which is what I believe is the element that you want moved.

I also changed your element.css({ to

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

It's using .clientX/Y which is the actual position of the mouse, without the need of further calculations.