title: angularjs draggable directive
body: <p>I'm implementing a image draggable directive. My code is at <a href="http://plnkr.co/edit/MXnOu6HM1XmMEzot7dn3">http://plnkr.co/edit/MXnOu6HM1XmMEzot7dn3</a> Basically its primarily made up of a base movable directive</p>
  
  <pre><code>appModule.directive('movable', function ($document) {
          return {
              restrict: 'A',
              require: 'ngModel',
              link: function postLink(scope, element, attrs) {
                  var startX = 0,
                      startY = 0,
                      x = 0,
                      y = 0;
  
                  element.css({
                      position: 'absolute'
                  });
  
                  function bindElementMove() {
                      element.bind('mousedown', function (event) {
                          // Prevent default dragging of selected content
                          console.log("binding element to move.");
                          startX = event.screenX - x;
                          startY = event.screenY - y;
                          $document.bind('mousemove', moveDiv);
                          $document.bind('mouseup', mouseup);
                      });
                  }
  
                  bindElementMove();
  
                  function moveDiv(event) {
                      console.log('im moving');
                      y = event.screenY - startY;
                      x = event.screenX - startX;
                      element.css({
                          top: y + 'px',
                          left: x + 'px'
                      });
                      scope.$apply(function () {
                          scope.tb.x = element.css("top");
                          scope.tb.y = element.css("left");
                      });
                  }
  
                  function mouseup() {
                      console.log("mouse up fired - unbind moveDiv and mouseUp");
                      $document.unbind('mousemove', moveDiv);
                      $document.unbind('mouseup', mouseup);
                  }
              }
          }
      });
  </code></pre>
  
  <p>And an image directive</p>
  
  <pre><code>appModule.directive("imgelement", function ($document) {
      return {
          restrict: 'E',
          template: '&lt;div movable resizable constrain deletable rotatable ng-style="{top:tb.x, left:tb.y, height:tb.height, width:tb.width}"&gt;&lt;img ng-src="{{tb.blob_url}}"  ng-style="{height:tb.height, width:tb.width}"/&gt;&lt;/div&gt;',
          require: 'ngModel',
          replace: true,
          link: function (scope, element, attrs) {
              hello = scope;
          }
      };
  });
  </code></pre>
  
  <p>However, as seen in plunkr, when i first click on the image and try to drag, it goes through several passes of the <code>mousemove</code> event, and then freezes, not moving anymore. Subsequently releasing my mouse moves the image, strangely. Any idea what i'm doing wrong here??  </p>