drag

mobile-angular-ui.gestures.drag module exposes the $drag service that is used to handle drag gestures. $drag service wraps $touch service adding CSS transforms reacting to touchmove events.

Usage

angular.module('myApp', ['mobile-angular-ui.gestures']);

Or

angular.module('myApp', ['mobile-angular-ui.gestures.drag']);

var dragOptions = {
  transform: $drag.TRANSLATE_BOTH,
  start:  function(dragInfo, event){},
  end:    function(dragInfo, event){},
  move:   function(dragInfo, event){},
  cancel: function(dragInfo, event){}
};

$drag.bind(element, dragOptions, touchOptions);

Where:

• transform is a function(element, currentTransform, touch) -> newTransform returning taking an element, its currentTransform and returning the newTransform for the element in response to touch. See $transform for more. Default to $drag.TRANSLATE_BOTH.
• start, end, move, cancel are optional callbacks responding to drag movement phases.
• dragInfo is an extended version of touchInfo from $touch, extending it with:
  • originalTransform: The $transform object relative to CSS transform before $drag is bound.
  • originalRect: The Bounding Client Rect for bound element before any drag action.
  • startRect: The Bounding Client Rect for bound element registered at start event.
  • startTransform: The $transform at start event.
  • rect: The current Bounding Client Rect for bound element.
  • transform: The current $transform.
  • reset: A function restoring element to originalTransform.
  • undo: A function restoring element to startTransform.
• touchOptions is an option object to be passed to underlying $touch service.

Predefined transforms

• $drag.NULL_TRANSFORM: No transform follow movement
• $drag.TRANSLATE_BOTH: Transform translate following movement on both x and y axis.
• $drag.TRANSLATE_HORIZONTAL: Transform translate following movement on x axis.
• $drag.TRANSLATE_UP: Transform translate following movement on negative y axis.
• $drag.TRANSLATE_DOWN: Transform translate following movement on positive y axis.
• $drag.TRANSLATE_LEFT: Transform translate following movement on negative x axis.
• $drag.TRANSLATE_RIGHT: Transform translate following movement on positive x axis.
• $drag.TRANSLATE_VERTICAL: Transform translate following movement on y axis.

• $drag.TRANSLATE_INSIDE: Is a function and should be used like:

    {
      transform: $drag.TRANSLATE_INSIDE(myElement)
    }
  

  It returns a transform function that contains translate movement inside the passed element.

.ui-drag-move style

While moving an .ui-drag-move class is attached to element. Style for this class is defined via insertRule and aims to fix common problems while dragging, specifically:

• Brings the element in front of other elements
• Disable transitions
• Makes text unselectable

NOTE Transitions are disabled cause they may introduce conflicts between transition: transform and dragOptions.transform function.

They will be re-enabled after drag, and this can be used to achieve some graceful effects.

If you need transition that does not involve transforms during movement you can apply them to an inner or wrapping element.

Examples

Limit movement to an element

app.directive('dragMe', ['$drag', function($drag){
  return {
    controller: function($scope, $element) {
      $drag.bind($element,
        {
          transform: $drag.TRANSLATE_INSIDE($element.parent()),
          end: function(drag) {
            drag.reset();
          }
        },
        { // release touch when movement is outside bounduaries
          sensitiveArea: $element.parent()
        }
      );
    }
  };
}]);