examples/drag.html

<!doctype html>
<html>
    <head>
      <meta charset="utf-8" />
      <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
      <meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0" />
      <title>Limiting $drag movement</title>
      <link rel="stylesheet" href="/dist/css/mobile-angular-ui-base.min.css" />
      <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.0/angular.min.js"></script>
      <script src="/dist/js/mobile-angular-ui.min.js"></script>
      <script src="/dist/js/mobile-angular-ui.gestures.min.js"></script>
      <style id='example-css'>
.viewport {
  height: 100%; 
  width: 100%; 
  padding: 40px;
}

.drag-area {
  height: 100%; 
  width: 100%; 
  border: 1px solid #444; 
  position: relative;
}

.drag-me {
  height: 100px;
  width: 100px;
  border-radius: 200px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -50px auto auto -50px;
  -webkit-transition: -webkit-transform 500ms;
  -ms-transition: -ms-transform 500ms;
  -moz-transition: -moz-transform 500ms;
  transition: transform 500ms;
  background-color: #d9edf7;
  border: 1px solid #31708f;
  color: #31708f;
  line-height: 95px;
  font-size: 30px;
  text-align: center;
  box-shadow: 1px 1px 1px #ccc;
  text-shadow: 1px 1px #fff;
}
      </style>
      <script>
        app = angular.module('myApp', ['mobile-angular-ui', 'mobile-angular-ui.gestures']);
      </script>
      <script id='example-js'>
app.directive('dragMe', ['$drag', function($drag){
  return {
    controller: function($scope, $element) {
      $drag.bind($element, 
        {
          // limit movement of element to its parent
          transform: $drag.TRANSLATE_INSIDE($element.parent()),

          end: function(drag) {
            // go back to initial position
            drag.reset();
          }
        },
        { // release touch when movement is outside bounduaries
          sensitiveArea: $element.parent()
        }
      );
    }
  };
}]);
      </script>
    </head>
    <body ng-app="myApp" id='example-html'>
        <div class='viewport'>
          <div class='drag-area'>
            <div drag-me class='drag-me'>
              <i class='fa fa-arrows'></i>
            </div>    
          </div>
        </div>
    </body>
</html>