CODEWITHSUNDEEP
javascripthtmldomangularjscoffeescript
Brian Petro
Brian Petro

Reputation: 1567

AngularJS, multiple draggable items causes 'jump' on initial move

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

Upvotes: 0

Views: 647

Answers (1)

Aaron Dufour
Aaron Dufour

Reputation: 17505

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.

Upvotes: 2

Related Questions