Skip to content

Commit 1d906b6

Browse files
author
timonkrebs
authored
feat(cdk/drag-drop): added dropPoint to dropped event (#22347)
* feat(cdk/drag-drop): added dropPoint to dropped * fix(cdk/drag-drop): fixed tests * feat(cdk/drag-drop): PR-Feedback renamed dropPoint to dropPosition * feat(cdk/drag-drop): added dropPosition also to CdkDragEnd * feat(cdk/drag-drop): fixed tests * feat(cdk/drag-drop): PR-Feedback renamed dropPosition back to dropPoint
1 parent a9cdb08 commit 1d906b6

File tree

7 files changed

+94
-39
lines changed

7 files changed

+94
-39
lines changed

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

Lines changed: 55 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -376,7 +376,8 @@ describe('CdkDrag', () => {
376376
// go into an infinite loop trying to stringify the event, if the test fails.
377377
expect(event).toEqual({
378378
source: fixture.componentInstance.dragInstance,
379-
distance: {x: jasmine.any(Number), y: jasmine.any(Number)}
379+
distance: {x: jasmine.any(Number), y: jasmine.any(Number)},
380+
dropPoint: {x: jasmine.any(Number), y: jasmine.any(Number)}
380381
});
381382
}));
382383

@@ -389,15 +390,17 @@ describe('CdkDrag', () => {
389390

390391
expect(event).toEqual({
391392
source: jasmine.anything(),
392-
distance: {x: 25, y: 30}
393+
distance: {x: 25, y: 30},
394+
dropPoint: {x: 25, y: 30}
393395
});
394396

395397
dragElementViaMouse(fixture, fixture.componentInstance.dragElement.nativeElement, 40, 50);
396398
event = fixture.componentInstance.endedSpy.calls.mostRecent().args[0];
397399

398400
expect(event).toEqual({
399401
source: jasmine.anything(),
400-
distance: {x: 40, y: 50}
402+
distance: {x: 40, y: 50},
403+
dropPoint: {x: 40, y: 50}
401404
});
402405
}));
403406

@@ -1690,7 +1693,8 @@ describe('CdkDrag', () => {
16901693
container: fixture.componentInstance.dropInstance,
16911694
previousContainer: fixture.componentInstance.dropInstance,
16921695
isPointerOverContainer: true,
1693-
distance: {x: jasmine.any(Number), y: jasmine.any(Number)}
1696+
distance: {x: jasmine.any(Number), y: jasmine.any(Number)},
1697+
dropPoint: {x: jasmine.any(Number), y: jasmine.any(Number)}
16941698
});
16951699

16961700
expect(dragItems.map(drag => drag.element.nativeElement.textContent!.trim()))
@@ -1733,6 +1737,7 @@ describe('CdkDrag', () => {
17331737
fixture.componentInstance.droppedSpy.calls.mostRecent().args[0];
17341738

17351739
expect(event.distance).toEqual({x: 50, y: 60});
1740+
expect(event.dropPoint).toEqual({x: 50, y: 60});
17361741
}));
17371742

17381743
it('should expose whether an item was dropped outside of a container', fakeAsync(() => {
@@ -1816,7 +1821,8 @@ describe('CdkDrag', () => {
18161821
container: fixture.componentInstance.dropInstance,
18171822
previousContainer: fixture.componentInstance.dropInstance,
18181823
isPointerOverContainer: false,
1819-
distance: {x: jasmine.any(Number), y: jasmine.any(Number)}
1824+
distance: {x: jasmine.any(Number), y: jasmine.any(Number)},
1825+
dropPoint: {x: jasmine.any(Number), y: jasmine.any(Number)}
18201826
});
18211827

18221828
expect(dragItems.map(drag => drag.element.nativeElement.textContent!.trim()))
@@ -1875,7 +1881,8 @@ describe('CdkDrag', () => {
18751881
container: fixture.componentInstance.dropInstance,
18761882
previousContainer: fixture.componentInstance.dropInstance,
18771883
isPointerOverContainer: true,
1878-
distance: {x: jasmine.any(Number), y: jasmine.any(Number)}
1884+
distance: {x: jasmine.any(Number), y: jasmine.any(Number)},
1885+
dropPoint: {x: jasmine.any(Number), y: jasmine.any(Number)}
18791886
});
18801887

18811888
expect(dragItems.map(drag => drag.element.nativeElement.textContent!.trim()))
@@ -1916,7 +1923,8 @@ describe('CdkDrag', () => {
19161923
container: fixture.componentInstance.dropInstance,
19171924
previousContainer: fixture.componentInstance.dropInstance,
19181925
isPointerOverContainer: true,
1919-
distance: {x: jasmine.any(Number), y: jasmine.any(Number)}
1926+
distance: {x: jasmine.any(Number), y: jasmine.any(Number)},
1927+
dropPoint: {x: jasmine.any(Number), y: jasmine.any(Number)}
19201928
});
19211929

19221930
expect(dragItems.map(drag => drag.element.nativeElement.textContent!.trim()))
@@ -1953,7 +1961,8 @@ describe('CdkDrag', () => {
19531961
container: fixture.componentInstance.dropInstance,
19541962
previousContainer: fixture.componentInstance.dropInstance,
19551963
isPointerOverContainer: false,
1956-
distance: {x: jasmine.any(Number), y: jasmine.any(Number)}
1964+
distance: {x: jasmine.any(Number), y: jasmine.any(Number)},
1965+
dropPoint: {x: jasmine.any(Number), y: jasmine.any(Number)}
19571966
});
19581967

19591968
expect(dragItems.map(drag => drag.element.nativeElement.textContent!.trim()))
@@ -1996,7 +2005,8 @@ describe('CdkDrag', () => {
19962005
container: fixture.componentInstance.dropInstance,
19972006
previousContainer: fixture.componentInstance.dropInstance,
19982007
isPointerOverContainer: jasmine.any(Boolean),
1999-
distance: {x: jasmine.any(Number), y: jasmine.any(Number)}
2008+
distance: {x: jasmine.any(Number), y: jasmine.any(Number)},
2009+
dropPoint: {x: jasmine.any(Number), y: jasmine.any(Number)}
20002010
});
20012011
}));
20022012

@@ -2044,7 +2054,8 @@ describe('CdkDrag', () => {
20442054
container: fixture.componentInstance.dropInstance,
20452055
previousContainer: fixture.componentInstance.dropInstance,
20462056
isPointerOverContainer: jasmine.any(Boolean),
2047-
distance: {x: jasmine.any(Number), y: jasmine.any(Number)}
2057+
distance: {x: jasmine.any(Number), y: jasmine.any(Number)},
2058+
dropPoint: {x: jasmine.any(Number), y: jasmine.any(Number)}
20482059
});
20492060

20502061
scrollTo(0, 0);
@@ -3635,7 +3646,8 @@ describe('CdkDrag', () => {
36353646
container: dropInstance,
36363647
previousContainer: dropInstance,
36373648
isPointerOverContainer: true,
3638-
distance: {x: jasmine.any(Number), y: jasmine.any(Number)}
3649+
distance: {x: jasmine.any(Number), y: jasmine.any(Number)},
3650+
dropPoint: {x: jasmine.any(Number), y: jasmine.any(Number)}
36393651
});
36403652

36413653
expect(dragItems.map(drag => drag.element.nativeElement.textContent!.trim()))
@@ -4067,7 +4079,8 @@ describe('CdkDrag', () => {
40674079
container: fixture.componentInstance.dropInstance,
40684080
previousContainer: fixture.componentInstance.dropInstance,
40694081
isPointerOverContainer: true,
4070-
distance: {x: jasmine.any(Number), y: jasmine.any(Number)}
4082+
distance: {x: jasmine.any(Number), y: jasmine.any(Number)},
4083+
dropPoint: {x: jasmine.any(Number), y: jasmine.any(Number)}
40714084
});
40724085
}));
40734086

@@ -4290,7 +4303,8 @@ describe('CdkDrag', () => {
42904303
container: fixture.componentInstance.dropInstance,
42914304
previousContainer: fixture.componentInstance.dropInstance,
42924305
isPointerOverContainer: jasmine.any(Boolean),
4293-
distance: {x: jasmine.any(Number), y: jasmine.any(Number)}
4306+
distance: {x: jasmine.any(Number), y: jasmine.any(Number)},
4307+
dropPoint: {x: jasmine.any(Number), y: jasmine.any(Number)}
42944308
});
42954309
}));
42964310

@@ -4345,7 +4359,8 @@ describe('CdkDrag', () => {
43454359
container: fixture.componentInstance.dropInstances.toArray()[1],
43464360
previousContainer: fixture.componentInstance.dropInstances.first,
43474361
isPointerOverContainer: true,
4348-
distance: {x: jasmine.any(Number), y: jasmine.any(Number)}
4362+
distance: {x: jasmine.any(Number), y: jasmine.any(Number)},
4363+
dropPoint: {x: jasmine.any(Number), y: jasmine.any(Number)}
43494364
});
43504365
}));
43514366

@@ -4450,7 +4465,8 @@ describe('CdkDrag', () => {
44504465
container: dropInstances[1],
44514466
previousContainer: dropInstances[0],
44524467
isPointerOverContainer: true,
4453-
distance: {x: jasmine.any(Number), y: jasmine.any(Number)}
4468+
distance: {x: jasmine.any(Number), y: jasmine.any(Number)},
4469+
dropPoint: {x: jasmine.any(Number), y: jasmine.any(Number)}
44544470
});
44554471
}));
44564472

@@ -4481,7 +4497,8 @@ describe('CdkDrag', () => {
44814497
container: dropInstances[0],
44824498
previousContainer: dropInstances[0],
44834499
isPointerOverContainer: false,
4484-
distance: {x: jasmine.any(Number), y: jasmine.any(Number)}
4500+
distance: {x: jasmine.any(Number), y: jasmine.any(Number)},
4501+
dropPoint: {x: jasmine.any(Number), y: jasmine.any(Number)}
44854502
});
44864503
}));
44874504

@@ -4512,7 +4529,8 @@ describe('CdkDrag', () => {
45124529
container: dropInstances[0],
45134530
previousContainer: dropInstances[0],
45144531
isPointerOverContainer: false,
4515-
distance: {x: jasmine.any(Number), y: jasmine.any(Number)}
4532+
distance: {x: jasmine.any(Number), y: jasmine.any(Number)},
4533+
dropPoint: {x: jasmine.any(Number), y: jasmine.any(Number)}
45164534
});
45174535
}));
45184536

@@ -4648,7 +4666,8 @@ describe('CdkDrag', () => {
46484666
container: dropInstances[1],
46494667
previousContainer: dropInstances[0],
46504668
isPointerOverContainer: true,
4651-
distance: {x: jasmine.any(Number), y: jasmine.any(Number)}
4669+
distance: {x: jasmine.any(Number), y: jasmine.any(Number)},
4670+
dropPoint: {x: jasmine.any(Number), y: jasmine.any(Number)}
46524671
});
46534672
}));
46544673

@@ -4785,7 +4804,8 @@ describe('CdkDrag', () => {
47854804
container: dropInstances[1],
47864805
previousContainer: dropInstances[0],
47874806
isPointerOverContainer: true,
4788-
distance: {x: jasmine.any(Number), y: jasmine.any(Number)}
4807+
distance: {x: jasmine.any(Number), y: jasmine.any(Number)},
4808+
dropPoint: {x: jasmine.any(Number), y: jasmine.any(Number)}
47894809
});
47904810
}));
47914811

@@ -4812,7 +4832,8 @@ describe('CdkDrag', () => {
48124832
container: dropInstances[1],
48134833
previousContainer: dropInstances[0],
48144834
isPointerOverContainer: true,
4815-
distance: {x: jasmine.any(Number), y: jasmine.any(Number)}
4835+
distance: {x: jasmine.any(Number), y: jasmine.any(Number)},
4836+
dropPoint: {x: jasmine.any(Number), y: jasmine.any(Number)}
48164837
});
48174838
}));
48184839

@@ -4844,7 +4865,8 @@ describe('CdkDrag', () => {
48444865
container: dropInstances[1],
48454866
previousContainer: dropInstances[0],
48464867
isPointerOverContainer: true,
4847-
distance: {x: jasmine.any(Number), y: jasmine.any(Number)}
4868+
distance: {x: jasmine.any(Number), y: jasmine.any(Number)},
4869+
dropPoint: {x: jasmine.any(Number), y: jasmine.any(Number)}
48484870
});
48494871
}));
48504872

@@ -4880,7 +4902,8 @@ describe('CdkDrag', () => {
48804902
container: fixture.componentInstance.dropInstances.toArray()[1],
48814903
previousContainer: fixture.componentInstance.dropInstances.first,
48824904
isPointerOverContainer: true,
4883-
distance: {x: jasmine.any(Number), y: jasmine.any(Number)}
4905+
distance: {x: jasmine.any(Number), y: jasmine.any(Number)},
4906+
dropPoint: {x: jasmine.any(Number), y: jasmine.any(Number)}
48844907
});
48854908

48864909
expect(dropContainers[0].contains(item.element.nativeElement)).toBe(true,
@@ -4977,7 +5000,8 @@ describe('CdkDrag', () => {
49775000
container: dropInstances[0],
49785001
previousContainer: dropInstances[0],
49795002
isPointerOverContainer: false,
4980-
distance: {x: jasmine.any(Number), y: jasmine.any(Number)}
5003+
distance: {x: jasmine.any(Number), y: jasmine.any(Number)},
5004+
dropPoint: {x: jasmine.any(Number), y: jasmine.any(Number)}
49815005
});
49825006
}));
49835007

@@ -5159,7 +5183,8 @@ describe('CdkDrag', () => {
51595183
container: dropInstances[2],
51605184
previousContainer: dropInstances[0],
51615185
isPointerOverContainer: false,
5162-
distance: {x: jasmine.any(Number), y: jasmine.any(Number)}
5186+
distance: {x: jasmine.any(Number), y: jasmine.any(Number)},
5187+
dropPoint: {x: jasmine.any(Number), y: jasmine.any(Number)}
51635188
}));
51645189

51655190
}));
@@ -5418,7 +5443,8 @@ describe('CdkDrag', () => {
54185443
container: fixture.componentInstance.dropInstances.toArray()[1],
54195444
previousContainer: fixture.componentInstance.dropInstances.first,
54205445
isPointerOverContainer: true,
5421-
distance: {x: jasmine.any(Number), y: jasmine.any(Number)}
5446+
distance: {x: jasmine.any(Number), y: jasmine.any(Number)},
5447+
dropPoint: {x: jasmine.any(Number), y: jasmine.any(Number)}
54225448
});
54235449

54245450
cleanup();
@@ -5453,7 +5479,8 @@ describe('CdkDrag', () => {
54535479
container: fixture.componentInstance.dropInstances.toArray()[1],
54545480
previousContainer: fixture.componentInstance.dropInstances.first,
54555481
isPointerOverContainer: true,
5456-
distance: {x: jasmine.any(Number), y: jasmine.any(Number)}
5482+
distance: {x: jasmine.any(Number), y: jasmine.any(Number)},
5483+
dropPoint: {x: jasmine.any(Number), y: jasmine.any(Number)}
54575484
});
54585485
}));
54595486

@@ -5487,7 +5514,8 @@ describe('CdkDrag', () => {
54875514
container: fixture.componentInstance.dropInstances.toArray()[1],
54885515
previousContainer: fixture.componentInstance.dropInstances.first,
54895516
isPointerOverContainer: true,
5490-
distance: {x: jasmine.any(Number), y: jasmine.any(Number)}
5517+
distance: {x: jasmine.any(Number), y: jasmine.any(Number)},
5518+
dropPoint: {x: jasmine.any(Number), y: jasmine.any(Number)}
54915519
});
54925520
}));
54935521

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

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -459,7 +459,11 @@ export class CdkDrag<T = any> implements AfterViewInit, OnChanges, OnDestroy {
459459
});
460460

461461
ref.ended.subscribe(event => {
462-
this.ended.emit({source: this, distance: event.distance});
462+
this.ended.emit({
463+
source: this,
464+
distance: event.distance,
465+
dropPoint: event.dropPoint
466+
});
463467

464468
// Since all of these events run outside of change detection,
465469
// we need to ensure that everything is marked correctly.
@@ -489,7 +493,8 @@ export class CdkDrag<T = any> implements AfterViewInit, OnChanges, OnDestroy {
489493
container: event.container.data,
490494
isPointerOverContainer: event.isPointerOverContainer,
491495
item: this,
492-
distance: event.distance
496+
distance: event.distance,
497+
dropPoint: event.dropPoint
493498
});
494499
});
495500
}

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -358,7 +358,8 @@ export class CdkDropList<T = any> implements OnDestroy {
358358
container: event.container.data,
359359
item: event.item.data,
360360
isPointerOverContainer: event.isPointerOverContainer,
361-
distance: event.distance
361+
distance: event.distance,
362+
dropPoint: event.dropPoint
362363
});
363364

364365
// Mark for check since all of these events run outside of change

‎src/cdk/drag-drop/drag-events.ts

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,8 @@ export interface CdkDragEnd<T = any> {
2727
source: CdkDrag<T>;
2828
/** Distance in pixels that the user has dragged since the drag sequence started. */
2929
distance: {x: number, y: number};
30+
/** Position where the pointer was when the item was dropped */
31+
dropPoint: {x: number, y: number};
3032
}
3133

3234
/** Event emitted when the user moves an item into a new drop container. */
@@ -67,6 +69,8 @@ export interface CdkDragDrop<T, O = T> {
6769
isPointerOverContainer: boolean;
6870
/** Distance in pixels that the user has dragged since the drag sequence started. */
6971
distance: {x: number, y: number};
72+
/** Position where the pointer was when the item was dropped */
73+
dropPoint: {x: number, y: number};
7074
}
7175

7276
/** Event emitted as the user is dragging a draggable item. */

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

Lines changed: 10 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -294,7 +294,7 @@ export class DragRef<T = any> {
294294
released = new Subject<{source: DragRef}>();
295295

296296
/** Emits when the user stops dragging an item in the container. */
297-
ended = new Subject<{source: DragRef, distance: Point}>();
297+
ended = new Subject<{source: DragRef, distance: Point, dropPoint: Point}>();
298298

299299
/** Emits when the user has moved the item into a new container. */
300300
entered = new Subject<{container: DropListRef, item: DragRef, currentIndex: number}>();
@@ -310,6 +310,7 @@ export class DragRef<T = any> {
310310
container: DropListRef;
311311
previousContainer: DropListRef;
312312
distance: Point;
313+
dropPoint: Point;
313314
isPointerOverContainer: boolean;
314315
}>();
315316

@@ -764,11 +765,13 @@ export class DragRef<T = any> {
764765
// the user starts dragging the item, its position will be calculated relatively
765766
// to the new passive transform.
766767
this._passiveTransform.x = this._activeTransform.x;
768+
const pointerPosition = this._getPointerPositionOnPage(event);
767769
this._passiveTransform.y = this._activeTransform.y;
768770
this._ngZone.run(() => {
769771
this.ended.next({
770772
source: this,
771-
distance: this._getDragDistance(this._getPointerPositionOnPage(event))
773+
distance: this._getDragDistance(pointerPosition),
774+
dropPoint: pointerPosition
772775
});
773776
});
774777
this._cleanupCachedDimensions();
@@ -910,22 +913,23 @@ export class DragRef<T = any> {
910913
const container = this._dropContainer!;
911914
const currentIndex = container.getItemIndex(this);
912915
const pointerPosition = this._getPointerPositionOnPage(event);
913-
const distance = this._getDragDistance(this._getPointerPositionOnPage(event));
916+
const distance = this._getDragDistance(pointerPosition);
914917
const isPointerOverContainer = container._isOverContainer(
915918
pointerPosition.x, pointerPosition.y);
916919

917-
this.ended.next({source: this, distance});
920+
this.ended.next({source: this, distance, dropPoint: pointerPosition});
918921
this.dropped.next({
919922
item: this,
920923
currentIndex,
921924
previousIndex: this._initialIndex,
922925
container: container,
923926
previousContainer: this._initialContainer,
924927
isPointerOverContainer,
925-
distance
928+
distance,
929+
dropPoint: pointerPosition
926930
});
927931
container.drop(this, currentIndex, this._initialIndex, this._initialContainer,
928-
isPointerOverContainer, distance);
932+
isPointerOverContainer, distance, pointerPosition);
929933
this._dropContainer = this._initialContainer;
930934
});
931935
}

0 commit comments

Comments
 (0)