2013-03-05 65 views
0

「跳」我使用位於AngularJS主站點的示例代碼。當我移動第一個可拖動對象時,一切都很好。只要我開始拖動第二個對象,第二個對象就會「跳」到第一個對象被移動的距離。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 
+2

縮進錯誤聽起來像CoffeeScript的,沒有棱角的問題。關於你的問題 - 在任何其他事情之前,重新設置x/y值的正確位置似乎是mousedown事件。 – 2013-03-05 21:18:53

+0

所以在所述位置加入「X = 0」和「y = 0」還是引起的壓痕錯誤。當我用0直接替換x和y時,在任何移動之前對象都會移回原始位置。 – 2013-03-06 10:51:50

+1

聽起來更像共享範圍問題。你是否在隔離指令的範圍?上面的代碼似乎沒有。 – Sharondio 2013-03-08 18:19:34

回答

2

這聽起來像在mousedown復位xy甚至會修:

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

如果你仍然得到的縮進錯誤,請確保您不要混用製表符和空格在您的縮進。