feat(cdk/drag-drop): add input to specify dragged item scale (#29392)

In some cases the parent of the dragged element might be scaled (e.g. when implementing zoom) which can throw off the positioning. Detecting this would be expensive, because we'd have to check the entire DOM tree so instead these changes add an input so the user can specify the scale amount.

Author: crisbeto

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

@@ -30,6 +30,7 @@ import {
   AfterViewInit,
   inject,
   Injector,
+  numberAttribute,
 } from '@angular/core';
 import {coerceElement, coerceNumberProperty} from '@angular/cdk/coercion';
 import {BehaviorSubject, Observable, Observer, Subject, merge} from 'rxjs';
@@ -159,6 +160,13 @@ export class CdkDrag<T = any> implements AfterViewInit, OnChanges, OnDestroy {
    */
   @Input('cdkDragPreviewContainer') previewContainer: PreviewContainer;
 
+  /**
+   * If the parent of the dragged element has a `scale` transform, it can throw off the
+   * positioning when the user starts dragging. Use this input to notify the CDK of the scale.
+   */
+  @Input({alias: 'cdkDragScale', transform: numberAttribute})
+  scale: number = 1;
+
   /** Emits when the user starts dragging the item. */
   @Output('cdkDragStarted') readonly started: EventEmitter<CdkDragStart> =
     new EventEmitter<CdkDragStart>();
@@ -261,6 +269,11 @@ export class CdkDrag<T = any> implements AfterViewInit, OnChanges, OnDestroy {
     if (dropContainer) {
       this._dragRef._withDropContainer(dropContainer._dropListRef);
       dropContainer.addItem(this);
+
+      // The drop container reads this so we need to sync it here.
+      dropContainer._dropListRef.beforeStarted.pipe(takeUntil(this._destroyed)).subscribe(() => {
+        this._dragRef.scale = this.scale;
+      });
     }
 
     this._syncInputs(this._dragRef);
@@ -448,6 +461,7 @@ export class CdkDrag<T = any> implements AfterViewInit, OnChanges, OnDestroy {
 
         ref.disabled = this.disabled;
         ref.lockAxis = this.lockAxis;
+        ref.scale = this.scale;
         ref.dragStartDelay =
           typeof dragStartDelay === 'object' && dragStartDelay
             ? dragStartDelay

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

@@ -5006,6 +5006,7 @@ const DROP_ZONE_FIXTURE_TEMPLATE = `
       [cdkDragBoundary]="boundarySelector"
       [cdkDragPreviewClass]="previewClass"
       [cdkDragPreviewContainer]="previewContainer"
+      [cdkDragScale]="scale"
       [style.height.px]="item.height"
       [style.margin-bottom.px]="item.margin"
       (cdkDragStarted)="startedSpy($event)"
@@ -5041,6 +5042,7 @@ export class DraggableInDropZone implements AfterViewInit {
   previewContainer: PreviewContainer = 'global';
   dropDisabled = signal(false);
   dropLockAxis = signal<DragAxis | undefined>(undefined);
+  scale = 1;
 
   constructor(protected _elementRef: ElementRef) {}
 

src/cdk/drag-drop/directives/single-axis-drop-list.spec.ts

@@ -311,4 +311,29 @@ describe('Single-axis drop list', () => {
 
     dispatchMouseEvent(document, 'mouseup');
   }));
+
+  it('should lay out the elements correctly when scaled', fakeAsync(() => {
+    const fixture = createComponent(DraggableInDropZone);
+    fixture.componentInstance.scale = 0.5;
+    fixture.detectChanges();
+
+    const items = fixture.componentInstance.dragItems.map(i => i.element.nativeElement);
+    const {top, left} = items[0].getBoundingClientRect();
+
+    startDraggingViaMouse(fixture, items[0], left, top);
+
+    const placeholder = document.querySelector('.cdk-drag-placeholder')! as HTMLElement;
+    const target = items[1];
+    const targetRect = target.getBoundingClientRect();
+
+    dispatchMouseEvent(document, 'mousemove', targetRect.left, targetRect.top + 5);
+    fixture.detectChanges();
+
+    expect(placeholder.style.transform).toBe(`translate3d(0px, ${ITEM_HEIGHT * 2}px, 0px)`);
+    expect(target.style.transform).toBe(`translate3d(0px, ${-ITEM_HEIGHT * 2}px, 0px)`);
+
+    dispatchMouseEvent(document, 'mouseup');
+    fixture.detectChanges();
+    flush();
+  }));
 });

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

@@ -1470,34 +1470,41 @@ describe('Standalone CdkDrag', () => {
     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();
+  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;
+    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).toBeFalsy();
+    startDraggingViaMouse(fixture, dragElement, 0, 0);
+    dispatchMouseEvent(document, 'mousemove', 50, 100);
+    fixture.detectChanges();
 
-      expect(dragElement.style.transform).toBe('translate3d(50px, 100px, 0px)');
+    expect(dragElement.style.transform).toBe('translate3d(50px, 100px, 0px)');
 
-      scrollTo(0, 500);
-      dispatchFakeEvent(document, 'scroll');
-      fixture.detectChanges();
-      dispatchMouseEvent(document, 'mousemove', 50, 200);
-      fixture.detectChanges();
+    scrollTo(0, 500);
+    dispatchFakeEvent(document, 'scroll');
+    fixture.detectChanges();
+    dispatchMouseEvent(document, 'mousemove', 50, 200);
+    fixture.detectChanges();
 
-      expect(dragElement.style.transform).toBe('translate3d(50px, 700px, 0px)');
+    expect(dragElement.style.transform).toBe('translate3d(50px, 700px, 0px)');
 
-      cleanup();
-    }),
-  );
+    cleanup();
+  }));
+
+  it('should account for scale when moving the element', fakeAsync(() => {
+    const fixture = createComponent(StandaloneDraggable);
+    fixture.componentInstance.scale = 0.5;
+    fixture.detectChanges();
+    const dragElement = fixture.componentInstance.dragElement.nativeElement;
+
+    expect(dragElement.style.transform).toBeFalsy();
+    dragElementViaMouse(fixture, dragElement, 50, 100);
+    expect(dragElement.style.transform).toBe('translate3d(100px, 200px, 0px)');
+  }));
 
   describe('with a handle', () => {
     it('should not be able to drag the entire element if it has a handle', fakeAsync(() => {
@@ -1718,6 +1725,7 @@ describe('Standalone CdkDrag', () => {
         [cdkDragFreeDragPosition]="freeDragPosition"
         [cdkDragDisabled]="dragDisabled()"
         [cdkDragLockAxis]="dragLockAxis()"
+        [cdkDragScale]="scale"
         (cdkDragStarted)="startedSpy($event)"
         (cdkDragReleased)="releasedSpy($event)"
         (cdkDragEnded)="endedSpy($event)"
@@ -1745,6 +1753,7 @@ class StandaloneDraggable {
   freeDragPosition?: {x: number; y: number};
   dragDisabled = signal(false);
   dragLockAxis = signal<DragAxis | undefined>(undefined);
+  scale = 1;
 }
 
 @Component({

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

@@ -288,6 +288,12 @@ export class DragRef<T = any> {
   /** Class to be added to the preview element. */
   previewClass: string | string[] | undefined;
 
+  /**
+   * If the parent of the dragged element has a `scale` transform, it can throw off the
+   * positioning when the user starts dragging. Use this input to notify the CDK of the scale.
+   */
+  scale: number = 1;
+
   /** Whether starting to drag this element is disabled. */
   get disabled(): boolean {
     return this._disabled || !!(this._dropContainer && this._dropContainer.disabled);
@@ -1288,7 +1294,8 @@ export class DragRef<T = any> {
    * @param y New transform value along the Y axis.
    */
   private _applyRootElementTransform(x: number, y: number) {
-    const transform = getTransform(x, y);
+    const scale = 1 / this.scale;
+    const transform = getTransform(x * scale, y * scale);
     const styles = this._rootElement.style;
 
     // Cache the previous transform amount only after the first drag sequence, because

src/cdk/drag-drop/sorting/single-axis-sort-strategy.ts

@@ -128,6 +128,8 @@ export class SingleAxisSortStrategy implements DropListSortStrategy {
       // Update the offset to reflect the new position.
       sibling.offset += offset;
 
+      const transformAmount = Math.round(sibling.offset * (1 / sibling.drag.scale));
+
       // Since we're moving the items with a `transform`, we need to adjust their cached
       // client rects to reflect their new position, as well as swap their positions in the cache.
       // Note that we shouldn't use `getBoundingClientRect` here to update the cache, because the
@@ -136,13 +138,13 @@ export class SingleAxisSortStrategy implements DropListSortStrategy {
         // Round the transforms since some browsers will
         // blur the elements, for sub-pixel transforms.
         elementToOffset.style.transform = combineTransforms(
-          `translate3d(${Math.round(sibling.offset)}px, 0, 0)`,
+          `translate3d(${transformAmount}px, 0, 0)`,
           sibling.initialTransform,
         );
         adjustDomRect(sibling.clientRect, 0, offset);
       } else {
         elementToOffset.style.transform = combineTransforms(
-          `translate3d(0, ${Math.round(sibling.offset)}px, 0)`,
+          `translate3d(0, ${transformAmount}px, 0)`,
           sibling.initialTransform,
         );
         adjustDomRect(sibling.clientRect, offset, 0);

tools/public_api_guard/cdk/drag-drop.md

@@ -76,6 +76,8 @@ export class CdkDrag<T = any> implements AfterViewInit, OnChanges, OnDestroy {
     // (undocumented)
     static ngAcceptInputType_disabled: unknown;
     // (undocumented)
+    static ngAcceptInputType_scale: unknown;
+    // (undocumented)
     ngAfterViewInit(): void;
     // (undocumented)
     ngOnChanges(changes: SimpleChanges): void;
@@ -92,14 +94,15 @@ export class CdkDrag<T = any> implements AfterViewInit, OnChanges, OnDestroy {
     // (undocumented)
     _resetPreviewTemplate(preview: CdkDragPreview): void;
     rootElementSelector: string;
+    scale: number;
     setFreeDragPosition(value: Point): void;
     // (undocumented)
     _setPlaceholderTemplate(placeholder: CdkDragPlaceholder): void;
     // (undocumented)
     _setPreviewTemplate(preview: CdkDragPreview): void;
     readonly started: EventEmitter<CdkDragStart>;
     // (undocumented)
-    static ɵdir: i0.ɵɵDirectiveDeclaration<CdkDrag<any>, "[cdkDrag]", ["cdkDrag"], { "data": { "alias": "cdkDragData"; "required": false; }; "lockAxis": { "alias": "cdkDragLockAxis"; "required": false; }; "rootElementSelector": { "alias": "cdkDragRootElement"; "required": false; }; "boundaryElement": { "alias": "cdkDragBoundary"; "required": false; }; "dragStartDelay": { "alias": "cdkDragStartDelay"; "required": false; }; "freeDragPosition": { "alias": "cdkDragFreeDragPosition"; "required": false; }; "disabled": { "alias": "cdkDragDisabled"; "required": false; }; "constrainPosition": { "alias": "cdkDragConstrainPosition"; "required": false; }; "previewClass": { "alias": "cdkDragPreviewClass"; "required": false; }; "previewContainer": { "alias": "cdkDragPreviewContainer"; "required": false; }; }, { "started": "cdkDragStarted"; "released": "cdkDragReleased"; "ended": "cdkDragEnded"; "entered": "cdkDragEntered"; "exited": "cdkDragExited"; "dropped": "cdkDragDropped"; "moved": "cdkDragMoved"; }, never, never, true, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<CdkDrag<any>, "[cdkDrag]", ["cdkDrag"], { "data": { "alias": "cdkDragData"; "required": false; }; "lockAxis": { "alias": "cdkDragLockAxis"; "required": false; }; "rootElementSelector": { "alias": "cdkDragRootElement"; "required": false; }; "boundaryElement": { "alias": "cdkDragBoundary"; "required": false; }; "dragStartDelay": { "alias": "cdkDragStartDelay"; "required": false; }; "freeDragPosition": { "alias": "cdkDragFreeDragPosition"; "required": false; }; "disabled": { "alias": "cdkDragDisabled"; "required": false; }; "constrainPosition": { "alias": "cdkDragConstrainPosition"; "required": false; }; "previewClass": { "alias": "cdkDragPreviewClass"; "required": false; }; "previewContainer": { "alias": "cdkDragPreviewContainer"; "required": false; }; "scale": { "alias": "cdkDragScale"; "required": false; }; }, { "started": "cdkDragStarted"; "released": "cdkDragReleased"; "ended": "cdkDragEnded"; "entered": "cdkDragEntered"; "exited": "cdkDragExited"; "dropped": "cdkDragDropped"; "moved": "cdkDragMoved"; }, never, never, true, never>;
     // (undocumented)
     static ɵfac: i0.ɵɵFactoryDeclaration<CdkDrag<any>, [null, { optional: true; skipSelf: true; }, null, null, null, { optional: true; }, { optional: true; }, null, null, { optional: true; self: true; }, { optional: true; skipSelf: true; }]>;
 }
@@ -440,6 +443,7 @@ export class DragRef<T = any> {
         event: MouseEvent | TouchEvent;
     }>;
     reset(): void;
+    scale: number;
     setFreeDragPosition(value: Point): this;
     _sortFromLastPointerPosition(): void;
     readonly started: Subject<{