downFn = function( event ) {
                  // Setting some variables required for calculations.
                  gridLeft = $scope.grid.element[0].getBoundingClientRect().left;
                  if ( $scope.grid.hasLeftContainer() ) {
                    gridLeft += $scope.grid.renderContainers.left.header[0].getBoundingClientRect().width;
                  }

                  previousMouseX = event.pageX || (event.originalEvent ? event.originalEvent.pageX : 0);
                  totalMouseMovement = 0;
                  rightMoveLimit = gridLeft + $scope.grid.getViewportWidth();

                  if ( event.type === 'mousedown' ) {
                    $document.on('mousemove', moveFn);
                    $document.on('mouseup', upFn);
                  }
                  else if ( event.type === 'touchstart' ) {
                    $document.on('touchmove', moveFn);
                    $document.on('touchend', upFn);
                  }
                }
@ngdoc directive
 @name ui.grid.moveColumns.directive:uiGridHeaderCell
 @element div
 @restrict A

 @description Stacks on top of ui.grid.uiGridHeaderCell to provide capability to be able to move it to reposition column.

 On receiving mouseDown event headerCell is cloned, now as the mouse moves the cloned header cell also moved in the grid.
 In case the moving cloned header cell reaches the left or right extreme of grid, grid scrolling is triggered (if horizontal scroll exists).
 On mouseUp event column is repositioned at position where mouse is released and cloned header cell is removed.

 Events that invoke cloning of header cell:
   - mousedown

 Events that invoke movement of cloned header cell:
   - mousemove

 Events that invoke repositioning of column:
   - mouseup