Draggable Directive jQuery

by zargyle

HTML

<script src="http://code.angularjs.org/1.2.9/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<div ng-app="test" ng-controller="testCtrl">
    <div id="container">
        <div class="shape" ng-draggable='dragOptions'></div>
    </div>
</div>

CSS

#container {
   width : 300px;
   height: 300px;
   background-color: black;
}

.shape {
    position: absolute;
    width : 40px;
    height: 40px;
    background-color: white;
}

JavaScript

angular.module('test', [])

.directive('ngDraggable', function($document) {
  return {
    restrict: 'A',
    scope: {
      dragOptions: '=ngDraggable'
    },
    link: function(scope, elem, attr) {
        $(elem).draggable(scope.dragOptions);
    }
  }
})

.controller('testCtrl', function($scope) { 
    $scope.dragOptions = { 
        containment: $("#container")
    };

});