fix(cdk/drag-drop): not blocking initial move event (#21752)

In #21382 the `preventDefault` call was moved further down so it doesn't prevent events until
the dragging threshold has been reached. The problem is that it'll only start calling `preventDefault`
from the first event __after__ the threshold has been reached which can be enough time for the device
to start scrolling.

These changes add an extra call as soon as dragging has been considered as "started".

Fixes #21749.

(cherry picked from commit 060ab9e)

Author: crisbeto

src/cdk/drag-drop/directives/drag.spec.ts

@@ -318,8 +318,10 @@ describe('CdkDrag', () => {
           dispatchTouchEvent(fixture.componentInstance.dragElement.nativeElement, 'touchstart');
           fixture.detectChanges();
 
-          dispatchTouchEvent(document, 'touchmove');
-          expect(dispatchTouchEvent(document, 'touchmove').defaultPrevented).toBe(true);
+          expect(dispatchTouchEvent(document, 'touchmove').defaultPrevented)
+              .toBe(true, 'Expected initial touchmove to be prevented.');
+          expect(dispatchTouchEvent(document, 'touchmove').defaultPrevented)
+              .toBe(true, 'Expected subsequent touchmose to be prevented.');
 
           dispatchTouchEvent(document, 'touchend');
           fixture.detectChanges();

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

@@ -629,6 +629,9 @@ export class DragRef<T = any> {
         // being dragged. This can happen while we're waiting for the drop animation to finish
         // and can cause errors, because some elements might still be moving around.
         if (!container || (!container.isDragging() && !container.isReceiving())) {
+          // Prevent the default action as soon as the dragging sequence is considered as
+          // "started" since waiting for the next event can allow the device to begin scrolling.
+          event.preventDefault();
           this._hasStartedDragging = true;
           this._ngZone.run(() => this._startDragSequence(event));
         }