fix(drag-drop): update free drag position on scroll (#19648)

Initially we didn't handle updating the item position if scrolling happens during a drag, because dragging was blocked. Eventually we unblocked dragging and added auto scrolling, but we only managed the dragged position when an item is inside a drop list.

These changes add some code to also manage scrolling inside a freely draggable item.

Author: crisbeto

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

@@ -1208,6 +1208,54 @@ describe('CdkDrag', () => {
       }).not.toThrow();
     }));
 
+    it('should update the free drag position if the page is scrolled', fakeAsync(() => {
+      const fixture = createComponent(StandaloneDraggable);
+      fixture.detectChanges();
+
+      const cleanup = makeScrollable();
+      const dragElement = fixture.componentInstance.dragElement.nativeElement;
+
+      expect(dragElement.style.transform).toBeFalsy();
+      startDraggingViaMouse(fixture, dragElement, 0, 0);
+      dispatchMouseEvent(document, 'mousemove', 50, 100);
+      fixture.detectChanges();
+
+      expect(dragElement.style.transform).toBe('translate3d(50px, 100px, 0px)');
+
+      scrollTo(0, 500);
+      dispatchFakeEvent(document, 'scroll');
+      fixture.detectChanges();
+      expect(dragElement.style.transform).toBe('translate3d(50px, 600px, 0px)');
+
+      cleanup();
+    }));
+
+    it('should update the free drag position if the user moves their pointer after the page ' +
+      'is scrolled', fakeAsync(() => {
+        const fixture = createComponent(StandaloneDraggable);
+        fixture.detectChanges();
+
+        const cleanup = makeScrollable();
+        const dragElement = fixture.componentInstance.dragElement.nativeElement;
+
+        expect(dragElement.style.transform).toBeFalsy();
+        startDraggingViaMouse(fixture, dragElement, 0, 0);
+        dispatchMouseEvent(document, 'mousemove', 50, 100);
+        fixture.detectChanges();
+
+        expect(dragElement.style.transform).toBe('translate3d(50px, 100px, 0px)');
+
+        scrollTo(0, 500);
+        dispatchFakeEvent(document, 'scroll');
+        fixture.detectChanges();
+        dispatchMouseEvent(document, 'mousemove', 50, 200);
+        fixture.detectChanges();
+
+        expect(dragElement.style.transform).toBe('translate3d(50px, 700px, 0px)');
+
+        cleanup();
+      }));
+
   });
 
   describe('draggable with a handle', () => {

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

@@ -1244,10 +1244,23 @@ export class DragRef<T = any> {
   private _updateOnScroll(event: Event) {
     const scrollDifference = this._parentPositions.handleScroll(event);
 
-    // ClientRect dimensions are based on the page's scroll position so
-    // we have to update the cached boundary ClientRect if the user has scrolled.
-    if (this._boundaryRect && scrollDifference) {
-      adjustClientRect(this._boundaryRect, scrollDifference.top, scrollDifference.left);
+    if (scrollDifference) {
+      // ClientRect dimensions are based on the page's scroll position so
+      // we have to update the cached boundary ClientRect if the user has scrolled.
+      if (this._boundaryRect) {
+        adjustClientRect(this._boundaryRect, scrollDifference.top, scrollDifference.left);
+      }
+
+      this._pickupPositionOnPage.x += scrollDifference.left;
+      this._pickupPositionOnPage.y += scrollDifference.top;
+
+      // If we're in free drag mode, we have to update the active transform, because
+      // it isn't relative to the viewport like the preview inside a drop list.
+      if (!this._dropContainer) {
+        this._activeTransform.x -= scrollDifference.left;
+        this._activeTransform.y -= scrollDifference.top;
+        this._applyRootElementTransform(this._activeTransform.x, this._activeTransform.y);
+      }
     }
   }