javascript - AngularJS 指令拖动对象如何删除不需要的鼠标效果

Question

这是plunk , 鼠标弹起事件中的一些代码:

element.css({
    top: (y + 20) + 'px',
    left:  (x + 20) + 'px'
});

这会将对象的位置在两个方向上偏移 20 像素。但是，当您再次单击该对象以拖动它时，它会跳跃，然后当您释放它时它会再次跳跃。

这是不受欢迎的。如果我已经创建，则有效地捕捉到网格系统。每次用户放下一个物体，当他们捡起它或拿起另一个物体时，我不希望物体在屏幕上出现这种不受欢迎的行为。

显然，对 plunk 的影响并不大，但是，当您使用此 snap to grid system 时，它会被大大夸大。 .

之所以这样，是因为我不明白所有的值(value)观是从哪里来的，所以如果有人能启发我，那就太好了，并向我展示解决问题的途径。

Answer 1

您做错的是您没有根据正在计算的新 newX 和 newY 值更新 x 和 y 的值。

function mouseup() {
          var newX = canvas.calcPos(columns, x, 20, 740);
          var newY = canvas.calcPos(rows, y, 10, 670);

          x = newX; //What you need to be doing
          y = newY;

          widget.css({
            left: newX + 'px',
            top: newY + 'px'
          });

          console.log(genCoord(x, y), genCoord(newX, newY));

          function genCoord(val1, val2){
            var res = '(' + val1 + ',' + val2 + ')';
            return res;
          }

          $document.off('mousemove', mousemove);
          $document.off('mouseup', mouseup);
        }

这应该有效地消除由全局范围保留的 x 和 y 引起的额外偏移。

here is the updated plunkr