angularjs draggable element with handles and position binding - FINAL

<!DOCTYPE html>
<html ng-app="drag">

<head>
  <script data-require="angular.js@*" data-semver="1.2.6" src="http://code.angularjs.org/1.2.6/angular.js"></script>
  <link href="style.css" rel="stylesheet" />
  <script src="script-coffee.js"></script>
</head>

<body>
Use the plus signs to drag the elements 

<div  ng-controller='dragController'> 
  
    <div id=outer>
      <div id=inner>
        <div ng-repeat="elem in elements" style="top: {{elem.top || 0}}px; left: {{elem.left || 0}}px" class=greenBox>
          <div class=handle draggable>+</div>
          <div>{{elem.name}}</div>
          <div>{{elem.top}}</div>
          <div>{{elem.left}}</div>
        </div>
      </div>
    </div>
  
Events ({{events.length}})  
    <div ng-repeat="event in events">
      <div>{{event | json}}</div>
    </div>
    
</div>



</body>

</html>

/*

This is the original draggable code. It is not used. See the coffeescript file. 

*/

angular.module('drag', []).
directive('draggable', function($document) {
  return function(scope, element, attr) {
    var startX = 0,
      startY = 0,
      x = 0,
      y = 0; 
      var container = null; 
      
    element.css({
      position: 'relative',
      cursor: 'pointer'
    });
    
    element.on('mousedown', function(event) {
      // Prevent default dragging of selected content
      event.preventDefault();
      startX = event.screenX - x;
      startY = event.screenY - y;
      $document.on('mousemove', mousemove);
      $document.on('mouseup', mouseup); 
      container = attr.$$element.parent();
      console.log(container);
    });

    function mousemove(event) {
      y = event.screenY - startY;
      x = event.screenX - startX;
      console.log("x: " + x + " y: " + y)
      container.css({
        top: y + 'px',
        left: x + 'px'
      });
    }

    function mouseup() {
      $document.unbind('mousemove', mousemove);
      $document.unbind('mouseup', mouseup);
    }
  }
});

/* Styles go here */

#outer
  /*width 500px
   background-color #666
  position absolute */
  display block
  padding 0px


.handle 
  display: block;
  width 10px
  margin-top: 0px 
  margin-left: 0px
  background-color #FE4

.greenBox 
  position absolute
  background-color #CE6
  width 100px 
  
#inner 
  position relative
  margin 50px
  width 80% 
  height 500px
  background-color #888
  overflow scroll

This shows how to databind position of draggable elements. Also illustrates use 
of a "drag handle" that is the only allowed way to drag the object. Also 
demonstrates constraint of draggable elements to their parent container.

console.log('this is from coffeescript file'); 

module = angular.module("drag", [])

module.directive "draggable", ($document) ->
  (scope, element, attr) ->
    [x, y, container, startX, startY] = [null, null, null, null, null] 
    
    # Prevent default dragging of selected content
    
    mousemove = (event) ->
      y = event.pageY - startY
      x = event.pageX - startX
      #console.log "x: " + x + " y: " + y
      if x < 0 then x = 0 
      if y < 0 then y = 0
      scope.$apply( -> 
        scope.$parent.events.push mousemove: x: x, y: y, pageX: event.pageX, pageY: event.pageY, startY: startY, startX: startX
        ) 
      #console.log "#{event.pageX}  #{event.pageY} "
      container.css
        top: y + "px"
        left: x + "px"

    mouseup = ->
      $document.unbind "mousemove", mousemove
      $document.unbind "mouseup", mouseup
      #debugger
      scope.elem.top = y
      scope.elem.left = x
      console.log element
      
      scope.$apply( -> 
        scope.$parent.events.push mouseup: x: x, y: y
        ) 
    
    startX = 0
    startY = 0
    x = scope.elem.left 
    y = scope.elem.top 
    container = null
    
    element.css
      position: "relative"
      cursor: "pointer"

    element.on "mousedown", (event) ->
      return unless event.which == 1
      event.preventDefault()
      console.log 'mousedown' 
      console.log event
      console.log element
      container = attr.$$element.parent()
      console.log container
      scope.$apply( -> 
        scope.$parent.events = ["mousedown": x: x, y: y, pageX: event.pageX, pageY: event.pageY, startY: startY, startX: startX]
        ) 
      startX = event.pageX - x 
      startY = event.pageY - y 
      
      $document.on "mousemove", mousemove
      $document.on "mouseup", mouseup

module.controller("dragController", ["$scope", ($scope) ->
  $scope.events = []
  $scope.elements = []
  $scope.elements.push(top: 27, left: 57, name: "#1")
  $scope.elements.push(top: 135, left: 40, name: "#2")
  $scope.elements.push(top: 184, left: 227, name: "#3")

  ])