fix(cdk/drag-drop): use consistent touch coordinates for bounded dragging (#33928)

Author: minwookshin

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

@@ -1052,6 +1052,30 @@ describe('Standalone CdkDrag', () => {
     expect(dragElement.style.transform).toBe('translate3d(100px, 100px, 0px)');
   });
 
+  it('should keep a touch drag within its boundary when another target is already touched', () => {
+    const fixture = createComponent(StandaloneDraggable);
+    fixture.componentInstance.boundary = '.wrapper';
+    fixture.detectChanges();
+    const dragElement = fixture.componentInstance.dragElement.nativeElement;
+    const rect = dragElement.getBoundingClientRect();
+    const outsideTouch = {pageX: rect.left + 400, pageY: rect.top + 400, identifier: 0};
+
+    const dispatchDragTouch = (type: string, x: number, y: number) => {
+      const event = createTouchEvent(type, x, y);
+      const touch = (event as TouchEvent).targetTouches[0];
+      Object.defineProperty(event, 'touches', {get: () => [outsideTouch, touch]});
+      dispatchEvent(dragElement, event);
+      fixture.detectChanges();
+    };
+
+    dispatchDragTouch('touchstart', rect.left + 10, rect.top + 10);
+    dispatchDragTouch('touchmove', rect.left + 310, rect.top + 310);
+    dispatchDragTouch('touchmove', rect.left + 310, rect.top + 310);
+    dispatchDragTouch('touchend', rect.left + 310, rect.top + 310);
+
+    expect(dragElement.style.transform).toBe('translate3d(100px, 100px, 0px)');
+  });
+
   it('should allow for dragging to be constrained to an element while using constrainPosition', () => {
     const fixture = createComponent(StandaloneDraggable);
     fixture.componentInstance.boundary = '.wrapper';

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

@@ -1269,14 +1269,15 @@ export class DragRef<T = any> {
   private _getPointerPositionOnPage(event: MouseEvent | TouchEvent): Point {
     const scrollPosition = this._getViewportScrollPosition();
     const point = isTouchEvent(event)
-      ? // `touches` will be empty for start/end events so we have to fall back to `changedTouches`.
-        // Also note that on real devices we're guaranteed for either `touches` or `changedTouches`
+      ? // Use the same target touch as the pickup offset when multiple elements are touched.
+        // `targetTouches` can be empty for end events, so fall back to `changedTouches`.
+        // Also note that on real devices either `targetTouches` or `changedTouches` is guaranteed
         // to have a value, but Firefox in device emulation mode has a bug where both can be empty
         // for `touchstart` and `touchend` so we fall back to a dummy object in order to avoid
         // throwing an error. The value returned here will be incorrect, but since this only
         // breaks inside a developer tool and the value is only used for secondary information,
         // we can get away with it. See https://bugzilla.mozilla.org/show_bug.cgi?id=1615824.
-        event.touches[0] || event.changedTouches[0] || {pageX: 0, pageY: 0}
+        event.targetTouches[0] || event.changedTouches[0] || {pageX: 0, pageY: 0}
       : event;
 
     const x = point.pageX - scrollPosition.left;