fix(cdk/drag-drop): constrainPosition now working well with boundary

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

@@ -560,6 +560,32 @@ describe('CdkDrag', () => {
       expect(dragElement.style.transform).toBe('translate3d(150px, 0px, 0px)');
     }));
 
+    it('should be able to lock dragging along the x axis while using constrainPosition', fakeAsync(() => {
+      const fixture = createComponent(StandaloneDraggable);
+      fixture.detectChanges();
+      fixture.componentInstance.dragInstance.lockAxis = 'x';
+      fixture.componentInstance.dragInstance.constrainPosition = (
+        {x, y}: Point,
+        _dragRef: DragRef,
+        _dimensions: ClientRect,
+        pickup: Point,
+      ) => {
+        x -= pickup.x;
+        y -= pickup.y;
+        return {x, y};
+      };
+
+      const dragElement = fixture.componentInstance.dragElement.nativeElement;
+
+      expect(dragElement.style.transform).toBeFalsy();
+
+      dragElementViaMouse(fixture, dragElement, 50, 100);
+      expect(dragElement.style.transform).toBe('translate3d(50px, 0px, 0px)');
+
+      dragElementViaMouse(fixture, dragElement, 100, 200);
+      expect(dragElement.style.transform).toBe('translate3d(150px, 0px, 0px)');
+    }));
+
     it('should be able to lock dragging along the y axis', fakeAsync(() => {
       const fixture = createComponent(StandaloneDraggable);
       fixture.detectChanges();
@@ -576,6 +602,33 @@ describe('CdkDrag', () => {
       expect(dragElement.style.transform).toBe('translate3d(0px, 300px, 0px)');
     }));
 
+    it('should be able to lock dragging along the y axis while using constrainPosition', fakeAsync(() => {
+      const fixture = createComponent(StandaloneDraggable);
+      fixture.detectChanges();
+
+      fixture.componentInstance.dragInstance.lockAxis = 'y';
+      fixture.componentInstance.dragInstance.constrainPosition = (
+        {x, y}: Point,
+        _dragRef: DragRef,
+        _dimensions: ClientRect,
+        pickup: Point,
+      ) => {
+        x -= pickup.x;
+        y -= pickup.y;
+        return {x, y};
+      };
+
+      const dragElement = fixture.componentInstance.dragElement.nativeElement;
+
+      expect(dragElement.style.transform).toBeFalsy();
+
+      dragElementViaMouse(fixture, dragElement, 50, 100);
+      expect(dragElement.style.transform).toBe('translate3d(0px, 100px, 0px)');
+
+      dragElementViaMouse(fixture, dragElement, 100, 200);
+      expect(dragElement.style.transform).toBe('translate3d(0px, 300px, 0px)');
+    }));
+
     it('should add a class while an element is being dragged', fakeAsync(() => {
       const fixture = createComponent(StandaloneDraggable);
       fixture.detectChanges();
@@ -946,6 +999,29 @@ describe('CdkDrag', () => {
       expect(dragElement.style.transform).toBe('translate3d(100px, 100px, 0px)');
     }));
 
+    it('should allow for dragging to be constrained to an element while using constrainPosition', fakeAsync(() => {
+      const fixture = createComponent(StandaloneDraggable);
+      fixture.componentInstance.boundary = '.wrapper';
+      fixture.detectChanges();
+
+      fixture.componentInstance.dragInstance.constrainPosition = (
+        {x, y}: Point,
+        _dragRef: DragRef,
+        _dimensions: ClientRect,
+        pickup: Point,
+      ) => {
+        x -= pickup.x;
+        y -= pickup.y;
+        return {x, y};
+      };
+
+      const dragElement = fixture.componentInstance.dragElement.nativeElement;
+
+      expect(dragElement.style.transform).toBeFalsy();
+      dragElementViaMouse(fixture, dragElement, 300, 300);
+      expect(dragElement.style.transform).toBe('translate3d(100px, 100px, 0px)');
+    }));
+
     it('should be able to pass in a DOM node as the boundary', fakeAsync(() => {
       const fixture = createComponent(StandaloneDraggable);
       fixture.componentInstance.boundary = fixture.nativeElement.querySelector('.wrapper');

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

@@ -1238,13 +1238,22 @@ export class DragRef<T = any> {
       : point;
 
     if (this.lockAxis === 'x' || dropContainerLock === 'x') {
-      y = this._pickupPositionOnPage.y;
+      y =
+        this._pickupPositionOnPage.y -
+        (this.constrainPosition ? this._pickupPositionInElement.y : 0);
     } else if (this.lockAxis === 'y' || dropContainerLock === 'y') {
-      x = this._pickupPositionOnPage.x;
+      x =
+        this._pickupPositionOnPage.x -
+        (this.constrainPosition ? this._pickupPositionInElement.x : 0);
     }
 
     if (this._boundaryRect) {
-      const {x: pickupX, y: pickupY} = this._pickupPositionInElement;
+      // If not using a custom constrain we need to account for the pickup position in the element
+      // otherwise we do not need to do this, as it has already been accounted for
+      const {x: pickupX, y: pickupY} = !this.constrainPosition
+        ? this._pickupPositionInElement
+        : {x: 0, y: 0};
+
       const boundaryRect = this._boundaryRect;
       const {width: previewWidth, height: previewHeight} = this._getPreviewRect();
       const minY = boundaryRect.top + pickupY;

src/dev-app/drag-drop/drag-drop-demo.html

@@ -1,12 +1,12 @@
 <div cdkDropListGroup>
   <div class="demo-list">
-
     <h2>To do</h2>
     <div
       cdkDropList
       (cdkDropListDropped)="drop($event)"
       [cdkDropListLockAxis]="axisLock"
-      [cdkDropListData]="todo">
+      [cdkDropListData]="todo"
+    >
       <div *ngFor="let item of todo" cdkDrag>
         {{item}}
         <mat-icon cdkDragHandle svgIcon="dnd-move"></mat-icon>
@@ -20,7 +20,8 @@ <h2>Done</h2>
       cdkDropList
       (cdkDropListDropped)="drop($event)"
       [cdkDropListLockAxis]="axisLock"
-      [cdkDropListData]="done">
+      [cdkDropListData]="done"
+    >
       <div *ngFor="let item of done" cdkDrag>
         {{item}}
         <mat-icon cdkDragHandle svgIcon="dnd-move"></mat-icon>
@@ -37,7 +38,8 @@ <h2>Ages</h2>
       cdkDropListOrientation="horizontal"
       (cdkDropListDropped)="drop($event)"
       [cdkDropListLockAxis]="axisLock"
-      [cdkDropListData]="ages">
+      [cdkDropListData]="ages"
+    >
       <div *ngFor="let item of ages" cdkDrag>
         {{item}}
         <mat-icon cdkDragHandle svgIcon="dnd-move"></mat-icon>
@@ -52,7 +54,8 @@ <h2>Preferred Ages</h2>
       cdkDropListOrientation="horizontal"
       (cdkDropListDropped)="drop($event)"
       [cdkDropListLockAxis]="axisLock"
-      [cdkDropListData]="preferredAges">
+      [cdkDropListData]="preferredAges"
+    >
       <div *ngFor="let item of preferredAges" cdkDrag>
         {{item}}
         <mat-icon cdkDragHandle svgIcon="dnd-move"></mat-icon>
@@ -63,7 +66,45 @@ <h2>Preferred Ages</h2>
 
 <div class="demo-list">
   <h2>Free dragging</h2>
-  <div cdkDrag class="demo-free-draggable" [cdkDragLockAxis]="axisLock" [cdkDragStartDelay]="dragStartDelay">Drag me around</div>
+  <div
+    cdkDrag
+    class="demo-free-draggable"
+    [cdkDragLockAxis]="axisLock"
+    [cdkDragStartDelay]="dragStartDelay"
+  >
+    Drag me around
+  </div>
+</div>
+
+<div>
+  <h2>Drag with box boundary</h2>
+  <div class="demo-constrain-box" id="constrain-box-1">
+    <div
+      cdkDrag
+      class="demo-free-draggable"
+      [cdkDragLockAxis]="axisLock"
+      [cdkDragStartDelay]="dragStartDelay"
+      cdkDragBoundary="#constrain-box-1"
+    >
+      Drag me around
+    </div>
+  </div>
+</div>
+
+<div>
+  <h2>Drag with box boundary and custom constrain</h2>
+  <div class="demo-constrain-box" id="constrain-box-2">
+    <div
+      cdkDrag
+      class="demo-free-draggable"
+      [cdkDragLockAxis]="axisLock"
+      [cdkDragStartDelay]="dragStartDelay"
+      cdkDragBoundary="#constrain-box-2"
+      [cdkDragConstrainPosition]="constrainPosition"
+    >
+      Drag me around
+    </div>
+  </div>
 </div>
 
 <div>
@@ -90,6 +131,6 @@ <h2>Axis locking</h2>
   <h2>Drag start delay</h2>
 
   <mat-form-field>
-    <input matInput placeholder="Drag start delay" value="0" [(ngModel)]="dragStartDelay">
+    <input matInput placeholder="Drag start delay" value="0" [(ngModel)]="dragStartDelay" />
   </mat-form-field>
 </div>

src/dev-app/drag-drop/drag-drop-demo.scss

@@ -99,3 +99,9 @@ pre {
   justify-content: center;
   align-items: center;
 }
+
+.demo-constrain-box {
+  width: 600px;
+  height: 400px;
+  border: 1px solid black;
+}

src/dev-app/drag-drop/drag-drop-demo.ts

@@ -14,6 +14,9 @@ import {
   DragDropModule,
   moveItemInArray,
   transferArrayItem,
+  Point,
+  DragRef,
+  CdkDrag,
 } from '@angular/cdk/drag-drop';
 import {CommonModule} from '@angular/common';
 import {FormsModule} from '@angular/forms';
@@ -74,4 +77,16 @@ export class DragAndDropDemo {
       );
     }
   }
+
+  constrainPosition(
+    {x, y}: Point,
+    _dragRef: DragRef,
+    _dimensions: ClientRect,
+    pickup: Point,
+  ): Point {
+    // Just returning the original top left corner to not modify position
+    x -= pickup.x;
+    y -= pickup.y;
+    return {x, y};
+  }
 }