Question

这是plunk，鼠标注册事件中的一些代码：

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

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

这是不受欢迎的。如果我已创建，实际上是一个对齐网格系统。每当用户丢弃一个对象时，当他们选择该对象或者拾取另一个对象时，我都不希望这种不期望的对象在屏幕上拍摄。

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

这是因为我不明白所有价值观的来源，所以如果有人能够启发我会很好，并告诉我解决问题的途径。

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

AngularJS Directive拖动对象如何删除不想要的鼠标效果

1 个答案: