AngularJS，多个可拖动项目导致初始移动时“跳跃”答案

【问题标题】：AngularJS, multiple draggable items causes 'jump' on initial moveAngularJS，多个可拖动项目导致初始移动时“跳跃”
【发布时间】：2013-02-20 02:02:34
【问题描述】：

我正在使用位于 AngularJS 主站点上的示例代码。当我移动第一个可拖动对象时，一切都很好。一旦我开始拖动第二个对象，第二个对象就会“跳跃”到第一个对象移动的距离。

最初我认为修复就像重置变量一样简单。不幸的是，我所有的尝试都导致了“缩进错误”。

# Angular Drag Components RE-uses vars from previous drag, bugging out the dragging
angular.module("aehalo", []).directive "draggable", ($document) ->
  startX = 0
  startY = 0
  x = 0
  y = 0
  (scope, element, attr) ->
    mousemove = (event) ->
      y = event.screenY - startY
      x = event.screenX - startX
      element.css
        top: y + "px"
        left: x + "px"

    mouseup = ->
      $document.unbind "mousemove", mousemove
      $document.unbind "mouseup", mouseup
    element.css
      position: "relative"
      border: "1px solid red"
      backgroundColor: "lightgrey"
      cursor: "pointer"
    element.bind "mousedown", (event) ->
      startX = event.screenX - x
      startY = event.screenY - y
      $document.bind "mousemove", mousemove
      $document.bind "mouseup", mouseup

【问题讨论】：

缩进错误听起来像是咖啡脚本的问题，而不是角度问题。关于您的问题 - 重置 x/y 值的正确位置似乎是 mousedown 事件，在其他任何事情之前。
所以在上述位置添加“x = 0”和“y = 0”仍然会导致缩进错误。当我将 x 和 y 直接替换为 0 时，对象会在任何移动之前移回其原始位置。
听起来更像是共享范围问题。您是否在指令中隔离范围？上面的代码似乎没有。
你有我可以看到的将范围隔离为指令的参考吗？下面的答案对我有帮助，但我一直沉迷于角度，所以你可以提供的任何来源都会受到赞赏。

标签： javascript html dom angularjs coffeescript

【解决方案1】：

这听起来像是在mousedown 中重置x 和y 甚至可以修复它：

    element.bind "mousedown", (event) ->
      x = 0
      y = 0
      startX = event.screenX - x
      startY = event.screenY - y
      $document.bind "mousemove", mousemove
      $document.bind "mouseup", mouseup

如果您仍然遇到缩进错误，请确保您没有在缩进中混合制表符和空格。

【讨论】：