(function () {
    'use strict';

    angular
        .module('boxDrag', [])
        .directive('boxDrag', boxDrag);

    boxDrag.$inject = ['$document'];

    /* @ngInject */
    function boxDrag($document) {
        /**
         * Usage:
         * Make an element draggable like jQueryUI does,
         * but without using jQueryUI.
         *
         * Common intended use case: you want to show an box, similar to a gmail compose window, in the
         * bottom right corner of the page, and you want this box to be draggable.
         *
         * Inspired by angular documentation: https://docs.angularjs.org/guide/compiler
         */
        var directive = {
            link: link,
            restrict: 'E'
        };
        return directive;

        function link(scope, element, attrs) {
            var startX = 0,
                startY = 0,
                x = 0,
                y = 20;

            element.appendTo('body');

            element.css({
                position: 'fixed',
                top: attrs.top || undefined,
                left: attrs.left || undefined,
                bottom: attrs.bottom || '20px',
                right: attrs.right || '20px',
                width: attrs.width || '400px'
            });

            angular.element(element[0].querySelector('div.box-drag-header')).css({
                padding: attrs.paddingHeader || '7px 10px'
            });

            angular.element(element[0].querySelector('div.box-drag-body')).css({
                height: attrs.bodyHeight || '310px',
                'overflow-y': attrs.bodyOverflowY || 'inherit'
            });

            angular.element(element[0].querySelector('div.box-drag-footer')).css({
                padding: attrs.paddingFooter || '7px 10px'
            });


            var height_header = angular.element(element[0].querySelector('div.box-drag-header')).prop('offsetHeight'),
                height_body = angular.element(element[0].querySelector('div.box-drag-body')).prop('offsetHeight'),
                height_footer = angular.element(element[0].querySelector('div.box-drag-footer')).prop('offsetHeight');

            /**
             * In case there is no footer.
             */
            if (height_footer === undefined) { height_footer = 0; }

            /**
             * Compute the wrapper height based off the heights of the header, body, and footer divs.
             */
            element.css({ height: height_header + height_body + height_footer + 'px' });


            var initialMove = true;

            /**
             * jqLite does not have jQuery's offset (top, left),
             * but this pull request implements this feature for jqLite.
             *
             * https://github.com/angular/angular.js/pull/3799/files
             */
            var jqLiteOffset = function(element) {
                var documentElem,
                    box = { top: 0, left: 0 },
                    doc = element && element.ownerDocument;

                documentElem = doc.documentElement;
                if ( typeof element.getBoundingClientRect !== undefined ) {
                    box = element.getBoundingClientRect();
                }

                return {
                    top: box.top + (window.pageYOffset || documentElem.scrollTop) - (documentElem.clientTop || 0),
                    left: box.left + (window.pageXOffset || documentElem.scrollLeft) - (documentElem.clientLeft || 0),
                    /**
                     * We add an extra return value to be used after mouseup function.
                     */
                    innerTop: box.top
                };
            };

            /**
             * Drag the box.
             */
            angular.element(element[0].querySelector('div.box-drag-handle')).on('mousedown', function(event) {
                event.preventDefault();

                x = jqLiteOffset(element[0]).left;
                y = jqLiteOffset(element[0]).top;

                startX = event.pageX - x;
                startY = event.pageY - y;

                $document.on('mousemove', mousemove);
                $document.on('mouseup', mouseup);
            });

            function mousemove(event) {
                element.css({position: 'absolute'});

                y = event.pageY - startY;
                x = event.pageX - startX;

                element.css({
                    top: y + 'px',
                    left: x + 'px'
                });
            }

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

                /**
                 * By setting the element back to "fixed", and using the current position
                 * relative to the viewport top, the modal will not get lost while scrolling.
                 */
                element.css({
                    position: 'fixed',
                    top: jqLiteOffset(element[0]).innerTop + 'px'
                });
            }
        }
    }
})();

@@ -3742,88 +3742,24 @@
     
-angular.element(element%5B0%5D.querySelector('div.box-drag-handle')).on('mousedown',
+var dragAction =
  fun
@@ -4110,36 +4110,143 @@
 );%0A            %7D
+;%0A%0A            angular.element(element%5B0%5D.querySelector('div.box-drag-handle')).on('mousedown', dragAction
 );%0A%0A
+%0A
             func
@@ -5060,32 +5060,32 @@
             %7D);%0A
-
             %7D%0A  
@@ -5078,24 +5078,526 @@
           %7D%0A
+%0A%0A            /**%0A             * Remove event-handler and dangling box-drag element from the dom.%0A             * https://github.com/johnpapa/angular-styleguide#style-y070%0A             * http://stackoverflow.com/questions/26983696/angularjs-does-destroy-remove-event-listeners%0A             */%0A            scope.$on('$destroy', function () %7B%0A                angular.element(element%5B0%5D.querySelector('div.box-drag-handle')).off('mousedown', dragAction);%0A                element.remove();%0A            %7D);%0A%0A
         %7D%0A  

remove element on the scope destroy event