AngularJS，多个项目拖动导致初始动“跳” [英] AngularJS, multiple draggable items causes 'jump' on initial move

问题描述

我使用位于AngularJS主站点的例子code。当我移动第一拖动对象，一切都很好。当我开始拖动第二个对象，第二个对象'跳跃'到底是哪首对象移动的距离。

起初我以为解决将作为重置变量一样简单。不幸的是，我所有的尝试都造成缩进错误。

 ＃角元件拖拽会重复使用previous拖乏，窃听了拖动
。angular.module（aehalo，[]）指令拖动（$文件） -  GT;
  运行startx = 0
  startY = 0
  X = 0
  Y = 0
  （范围，元素，属性） -  GT;
    鼠标移动=（事件） -  GT;
      Y = event.screenY  -  startY
      X = event.screenX  -  STARTX
      element.css
        顶部：Y +PX
        左：X +像素    鼠标松开=  - ＆GT;
      $ document.unbind鼠标移动，鼠标移动
      $ document.unbind鼠标松开，鼠标松开
    element.css
      位置：相对
      边框：1px的红色实心
      的backgroundColor：浅灰
      光标：指针
    element.bind鼠标按下（事件） -  GT;
      运行startx = event.screenX  -  X
      startY = event.screenY  - ÿ
      $ document.bind鼠标移动，鼠标移动
      $ document.bind鼠标松开，鼠标松开
 

解决方案

这听起来像重置 X 和是在鼠标按下甚至会修：

  element.bind鼠标按下（事件） -  GT;
      X = 0
      Y = 0
      运行startx = event.screenX  -  X
      startY = event.screenY  - ÿ
      $ document.bind鼠标移动，鼠标移动
      $ document.bind鼠标松开，鼠标松开
 

如果你仍然得到压痕错误，请确保不要混用制表符和空格在你的缩进。

I am using the example code located on the AngularJS main site. When I move the first draggable object, all is well. As soon as I begin dragging a second object, the second object 'jumps' exactly the distance which the first object was moved.

Initially I thought the fix would be as simple as resetting the variables. Unfortunately, all of my attempts have caused 'indentation errors'.

# 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

解决方案

It sounds like resetting x and y in the mousedown even would fix it:

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

If you're still getting indentation errors, make sure you aren't mixing tabs and spaces in your indentation.

这篇关于AngularJS，多个项目拖动导致初始动“跳”的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！