diff --git a/src/cdk/drag-drop/drag-events.ts b/src/cdk/drag-drop/drag-events.ts index 2fcbefc0f51..b305720c823 100644 --- a/src/cdk/drag-drop/drag-events.ts +++ b/src/cdk/drag-drop/drag-events.ts @@ -63,4 +63,11 @@ export interface CdkDragMove { pointerPosition: {x: number, y: number}; /** Native event that is causing the dragging. */ event: MouseEvent | TouchEvent; + /** + * Indicates the direction in which the user is dragging the element along each axis. + * `1` means that the position is increasing (e.g. the user is moving to the right or downwards), + * whereas `-1` means that it's decreasing (they're moving to the left or upwards). `0` means + * that the position hasn't changed. + */ + delta: {x: -1 | 0 | 1, y: -1 | 0 | 1}; } diff --git a/src/cdk/drag-drop/drag.ts b/src/cdk/drag-drop/drag.ts index f61cf090e45..1bfb3d29444 100644 --- a/src/cdk/drag-drop/drag.ts +++ b/src/cdk/drag-drop/drag.ts @@ -336,7 +336,7 @@ export class CdkDrag implements AfterViewInit, OnDestroy { event.preventDefault(); const pointerPosition = this._getConstrainedPointerPosition(event); - this._updatePointerDirectionDelta(pointerPosition); + const delta = this._updatePointerDirectionDelta(pointerPosition); if (this.dropContainer) { this._updateActiveDropContainer(pointerPosition); @@ -351,13 +351,14 @@ export class CdkDrag implements AfterViewInit, OnDestroy { // Since this event gets fired for every pixel while dragging, we only // want to fire it if the consumer opted into it. Also we have to - // re-enter the zone becaus we run all of the events on the outside. + // re-enter the zone because we run all of the events on the outside. if (this._moveEventSubscriptions > 0) { this._ngZone.run(() => { this._moveEvents.next({ source: this, pointerPosition, - event + event, + delta }); }); } @@ -659,6 +660,8 @@ export class CdkDrag implements AfterViewInit, OnDestroy { delta.y = y > positionSinceLastChange.y ? 1 : -1; positionSinceLastChange.y = y; } + + return delta; } /** Gets the root draggable element, based on the `rootElementSelector`. */