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

AngularJS Directive dragging object how to remove Undesired Mouse Effect

本文关键字：不需要 鼠标 删除 拖动 指令 对象 何删除 AngularJS      更新时间：2023-09-26

这是这个 plunk，鼠标向上事件中的一些代码：

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

这会在两个方向上将对象的位置偏移 20 px。但是当你再次点击对象来拖动它时，它会跳跃，然后当你释放它时，它会再次跳跃。

这是不希望的。如果我创建了，则有效地捕捉到网格系统。每次用户掉落一个物体时，当他们捡起它或捡起另一个物体时，我不希望物体在屏幕上射击的这种不良行为。

显然，对 plunk 的影响并没有那么大，但是，当您使用此快照到网格系统时，它会变得非常夸张。

之所以这样，是因为我不明白所有价值观的来源，所以如果有人能启发我，那就太好了，并向我展示了解决问题的道路。

你做错了什么，就是你没有根据你正在计算的新 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 引起的额外偏移。

这是更新的 plunkr

相关文章：