(function(angular) {
 'use strict';
angular.module('dragModule', [])
 .directive('myDraggable', ['$document', function($document) {
   return {
     link: function(scope, element, attr) {
       var startX = 0, startY = 0, x = 0, y = 0;

       element.css({
        position: 'relative',
        width: '100px'
       });
       var drg = angular.element('<div class="drg" bgcolor="blue">&nbsp; ||| &nbsp;</div>');
       element.prepend(drg);
       drg.css({
        border: '1px solid red',
        backgroundColor: 'lightgrey',
        cursor: 'pointer',
        width: '100px',
        'text-align': 'center'
       });

       drg.on('mousedown', function(event) {
         // Prevent default dragging of selected content
         event.preventDefault();
         startX = event.pageX - x;
         startY = event.pageY - y;
         $document.on('mousemove', mousemove);
         $document.on('mouseup', mouseup);
       });

       function mousemove(event) {
         y = event.pageY - startY;
         x = event.pageX - startX;
         element.css({
           top: y + 'px',
           left:  x + 'px'
         });
       }

       function mouseup() {
         $document.off('mousemove', mousemove);
         $document.off('mouseup', mouseup);
       }
     }
   };
 }]);
})(window.angular);