refactor(drag-drop): expose delta in moved event (#12952)

Since we now have the delta of the movement easily available, we can expose it via the `cdkDragMoved` event.

src/cdk/drag-drop/drag-events.ts

@@ -63,4 +63,11 @@ export interface CdkDragMove<T = any> {
   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};
 }

src/cdk/drag-drop/drag.ts

@@ -336,7 +336,7 @@ export class CdkDrag<T = any> 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<T = any> 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<T = any> implements AfterViewInit, OnDestroy {
       delta.y = y > positionSinceLastChange.y ? 1 : -1;
       positionSinceLastChange.y = y;
     }
+
+    return delta;
   }
 
   /** Gets the root draggable element, based on the `rootElementSelector`. */