Skip to content

Commit ca6b9fa

Browse files
crisbetocrisbeto
authored
feat(cdk/drag-drop): expose native event objects in custom events (#17077)
Exposes the native `MouseEvent` and `TouchEvent` objects in the various drag&drop events since they can contain useful information like which keys were pressed while dragging. Fixes #17032.
1 parent 469b790 commit ca6b9fa

File tree

7 files changed

+103
-38
lines changed

7 files changed

+103
-38
lines changed

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

Lines changed: 32 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -421,7 +421,10 @@ describe('CdkDrag', () => {
421421

422422
// Assert the event like this, rather than `toHaveBeenCalledWith`, because Jasmine will
423423
// go into an infinite loop trying to stringify the event, if the test fails.
424-
expect(event).toEqual({source: fixture.componentInstance.dragInstance});
424+
expect(event).toEqual({
425+
source: fixture.componentInstance.dragInstance,
426+
event: jasmine.anything(),
427+
});
425428
}));
426429

427430
it('should dispatch an event when the user has stopped dragging', fakeAsync(() => {
@@ -440,6 +443,7 @@ describe('CdkDrag', () => {
440443
source: fixture.componentInstance.dragInstance,
441444
distance: {x: jasmine.any(Number), y: jasmine.any(Number)},
442445
dropPoint: {x: jasmine.any(Number), y: jasmine.any(Number)},
446+
event: jasmine.anything(),
443447
});
444448
}));
445449

@@ -454,6 +458,7 @@ describe('CdkDrag', () => {
454458
source: jasmine.anything(),
455459
distance: {x: 25, y: 30},
456460
dropPoint: {x: 25, y: 30},
461+
event: jasmine.anything(),
457462
});
458463

459464
dragElementViaMouse(fixture, fixture.componentInstance.dragElement.nativeElement, 40, 50);
@@ -463,6 +468,7 @@ describe('CdkDrag', () => {
463468
source: jasmine.anything(),
464469
distance: {x: 40, y: 50},
465470
dropPoint: {x: 40, y: 50},
471+
event: jasmine.anything(),
466472
});
467473
}));
468474

@@ -1821,6 +1827,7 @@ describe('CdkDrag', () => {
18211827
isPointerOverContainer: true,
18221828
distance: {x: jasmine.any(Number), y: jasmine.any(Number)},
18231829
dropPoint: {x: jasmine.any(Number), y: jasmine.any(Number)},
1830+
event: jasmine.anything(),
18241831
});
18251832

18261833
expect(dragItems.map(drag => drag.element.nativeElement.textContent!.trim())).toEqual([
@@ -1995,6 +2002,7 @@ describe('CdkDrag', () => {
19952002
isPointerOverContainer: false,
19962003
distance: {x: jasmine.any(Number), y: jasmine.any(Number)},
19972004
dropPoint: {x: jasmine.any(Number), y: jasmine.any(Number)},
2005+
event: jasmine.anything(),
19982006
});
19992007

20002008
expect(dragItems.map(drag => drag.element.nativeElement.textContent!.trim())).toEqual([
@@ -2071,6 +2079,7 @@ describe('CdkDrag', () => {
20712079
isPointerOverContainer: true,
20722080
distance: {x: jasmine.any(Number), y: jasmine.any(Number)},
20732081
dropPoint: {x: jasmine.any(Number), y: jasmine.any(Number)},
2082+
event: jasmine.anything(),
20742083
});
20752084

20762085
expect(dragItems.map(drag => drag.element.nativeElement.textContent!.trim())).toEqual([
@@ -2127,6 +2136,7 @@ describe('CdkDrag', () => {
21272136
isPointerOverContainer: true,
21282137
distance: {x: jasmine.any(Number), y: jasmine.any(Number)},
21292138
dropPoint: {x: jasmine.any(Number), y: jasmine.any(Number)},
2139+
event: jasmine.anything(),
21302140
});
21312141

21322142
expect(dragItems.map(drag => drag.element.nativeElement.textContent!.trim())).toEqual([
@@ -2177,6 +2187,7 @@ describe('CdkDrag', () => {
21772187
isPointerOverContainer: false,
21782188
distance: {x: jasmine.any(Number), y: jasmine.any(Number)},
21792189
dropPoint: {x: jasmine.any(Number), y: jasmine.any(Number)},
2190+
event: jasmine.anything(),
21802191
});
21812192

21822193
expect(dragItems.map(drag => drag.element.nativeElement.textContent!.trim())).toEqual([
@@ -2225,6 +2236,7 @@ describe('CdkDrag', () => {
22252236
isPointerOverContainer: jasmine.any(Boolean),
22262237
distance: {x: jasmine.any(Number), y: jasmine.any(Number)},
22272238
dropPoint: {x: jasmine.any(Number), y: jasmine.any(Number)},
2239+
event: jasmine.anything(),
22282240
});
22292241
}));
22302242

@@ -2277,6 +2289,7 @@ describe('CdkDrag', () => {
22772289
isPointerOverContainer: jasmine.any(Boolean),
22782290
distance: {x: jasmine.any(Number), y: jasmine.any(Number)},
22792291
dropPoint: {x: jasmine.any(Number), y: jasmine.any(Number)},
2292+
event: jasmine.anything(),
22802293
});
22812294
}));
22822295

@@ -2326,6 +2339,7 @@ describe('CdkDrag', () => {
23262339
isPointerOverContainer: jasmine.any(Boolean),
23272340
distance: {x: jasmine.any(Number), y: jasmine.any(Number)},
23282341
dropPoint: {x: jasmine.any(Number), y: jasmine.any(Number)},
2342+
event: jasmine.anything(),
23292343
});
23302344

23312345
scrollTo(0, 0);
@@ -4097,6 +4111,7 @@ describe('CdkDrag', () => {
40974111
isPointerOverContainer: true,
40984112
distance: {x: jasmine.any(Number), y: jasmine.any(Number)},
40994113
dropPoint: {x: jasmine.any(Number), y: jasmine.any(Number)},
4114+
event: jasmine.anything(),
41004115
});
41014116

41024117
expect(dragItems.map(drag => drag.element.nativeElement.textContent!.trim())).toEqual([
@@ -4581,6 +4596,7 @@ describe('CdkDrag', () => {
45814596
isPointerOverContainer: true,
45824597
distance: {x: jasmine.any(Number), y: jasmine.any(Number)},
45834598
dropPoint: {x: jasmine.any(Number), y: jasmine.any(Number)},
4599+
event: jasmine.anything(),
45844600
});
45854601
}));
45864602

@@ -4827,6 +4843,7 @@ describe('CdkDrag', () => {
48274843
isPointerOverContainer: jasmine.any(Boolean),
48284844
distance: {x: jasmine.any(Number), y: jasmine.any(Number)},
48294845
dropPoint: {x: jasmine.any(Number), y: jasmine.any(Number)},
4846+
event: jasmine.anything(),
48304847
});
48314848
}));
48324849

@@ -4955,6 +4972,7 @@ describe('CdkDrag', () => {
49554972
isPointerOverContainer: true,
49564973
distance: {x: jasmine.any(Number), y: jasmine.any(Number)},
49574974
dropPoint: {x: jasmine.any(Number), y: jasmine.any(Number)},
4975+
event: jasmine.anything(),
49584976
});
49594977
}));
49604978

@@ -5070,6 +5088,7 @@ describe('CdkDrag', () => {
50705088
isPointerOverContainer: true,
50715089
distance: {x: jasmine.any(Number), y: jasmine.any(Number)},
50725090
dropPoint: {x: jasmine.any(Number), y: jasmine.any(Number)},
5091+
event: jasmine.anything(),
50735092
});
50745093
}));
50755094

@@ -5101,6 +5120,7 @@ describe('CdkDrag', () => {
51015120
isPointerOverContainer: false,
51025121
distance: {x: jasmine.any(Number), y: jasmine.any(Number)},
51035122
dropPoint: {x: jasmine.any(Number), y: jasmine.any(Number)},
5123+
event: jasmine.anything(),
51045124
});
51055125
}));
51065126

@@ -5132,6 +5152,7 @@ describe('CdkDrag', () => {
51325152
isPointerOverContainer: false,
51335153
distance: {x: jasmine.any(Number), y: jasmine.any(Number)},
51345154
dropPoint: {x: jasmine.any(Number), y: jasmine.any(Number)},
5155+
event: jasmine.anything(),
51355156
});
51365157
}));
51375158

@@ -5277,6 +5298,7 @@ describe('CdkDrag', () => {
52775298
isPointerOverContainer: true,
52785299
distance: {x: jasmine.any(Number), y: jasmine.any(Number)},
52795300
dropPoint: {x: jasmine.any(Number), y: jasmine.any(Number)},
5301+
event: jasmine.anything(),
52805302
});
52815303
}));
52825304

@@ -5420,6 +5442,7 @@ describe('CdkDrag', () => {
54205442
isPointerOverContainer: true,
54215443
distance: {x: jasmine.any(Number), y: jasmine.any(Number)},
54225444
dropPoint: {x: jasmine.any(Number), y: jasmine.any(Number)},
5445+
event: jasmine.anything(),
54235446
});
54245447
}));
54255448

@@ -5448,6 +5471,7 @@ describe('CdkDrag', () => {
54485471
isPointerOverContainer: true,
54495472
distance: {x: jasmine.any(Number), y: jasmine.any(Number)},
54505473
dropPoint: {x: jasmine.any(Number), y: jasmine.any(Number)},
5474+
event: jasmine.anything(),
54515475
});
54525476
}));
54535477

@@ -5481,6 +5505,7 @@ describe('CdkDrag', () => {
54815505
isPointerOverContainer: true,
54825506
distance: {x: jasmine.any(Number), y: jasmine.any(Number)},
54835507
dropPoint: {x: jasmine.any(Number), y: jasmine.any(Number)},
5508+
event: jasmine.anything(),
54845509
});
54855510
}));
54865511

@@ -5527,6 +5552,7 @@ describe('CdkDrag', () => {
55275552
isPointerOverContainer: true,
55285553
distance: {x: jasmine.any(Number), y: jasmine.any(Number)},
55295554
dropPoint: {x: jasmine.any(Number), y: jasmine.any(Number)},
5555+
event: jasmine.anything(),
55305556
});
55315557

55325558
expect(dropContainers[0].contains(item.element.nativeElement))
@@ -5633,6 +5659,7 @@ describe('CdkDrag', () => {
56335659
isPointerOverContainer: false,
56345660
distance: {x: jasmine.any(Number), y: jasmine.any(Number)},
56355661
dropPoint: {x: jasmine.any(Number), y: jasmine.any(Number)},
5662+
event: jasmine.anything(),
56365663
});
56375664
}));
56385665

@@ -5822,6 +5849,7 @@ describe('CdkDrag', () => {
58225849
isPointerOverContainer: false,
58235850
distance: {x: jasmine.any(Number), y: jasmine.any(Number)},
58245851
dropPoint: {x: jasmine.any(Number), y: jasmine.any(Number)},
5852+
event: jasmine.anything(),
58255853
}),
58265854
);
58275855
}),
@@ -6198,6 +6226,7 @@ describe('CdkDrag', () => {
61986226
isPointerOverContainer: true,
61996227
distance: {x: jasmine.any(Number), y: jasmine.any(Number)},
62006228
dropPoint: {x: jasmine.any(Number), y: jasmine.any(Number)},
6229+
event: jasmine.anything(),
62016230
});
62026231

62036232
cleanup();
@@ -6244,6 +6273,7 @@ describe('CdkDrag', () => {
62446273
isPointerOverContainer: true,
62456274
distance: {x: jasmine.any(Number), y: jasmine.any(Number)},
62466275
dropPoint: {x: jasmine.any(Number), y: jasmine.any(Number)},
6276+
event: jasmine.anything(),
62476277
});
62486278
}));
62496279

@@ -6282,6 +6312,7 @@ describe('CdkDrag', () => {
62826312
isPointerOverContainer: true,
62836313
distance: {x: jasmine.any(Number), y: jasmine.any(Number)},
62846314
dropPoint: {x: jasmine.any(Number), y: jasmine.any(Number)},
6315+
event: jasmine.anything(),
62856316
});
62866317
}));
62876318

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

Lines changed: 22 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -442,55 +442,57 @@ export class CdkDrag<T = any> implements AfterViewInit, OnChanges, OnDestroy {
442442

443443
/** Handles the events from the underlying `DragRef`. */
444444
private _handleEvents(ref: DragRef<CdkDrag<T>>) {
445-
ref.started.subscribe(() => {
446-
this.started.emit({source: this});
445+
ref.started.subscribe(startEvent => {
446+
this.started.emit({source: this, event: startEvent.event});
447447

448448
// Since all of these events run outside of change detection,
449449
// we need to ensure that everything is marked correctly.
450450
this._changeDetectorRef.markForCheck();
451451
});
452452

453-
ref.released.subscribe(() => {
454-
this.released.emit({source: this});
453+
ref.released.subscribe(releaseEvent => {
454+
this.released.emit({source: this, event: releaseEvent.event});
455455
});
456456

457-
ref.ended.subscribe(event => {
457+
ref.ended.subscribe(endEvent => {
458458
this.ended.emit({
459459
source: this,
460-
distance: event.distance,
461-
dropPoint: event.dropPoint,
460+
distance: endEvent.distance,
461+
dropPoint: endEvent.dropPoint,
462+
event: endEvent.event,
462463
});
463464

464465
// Since all of these events run outside of change detection,
465466
// we need to ensure that everything is marked correctly.
466467
this._changeDetectorRef.markForCheck();
467468
});
468469

469-
ref.entered.subscribe(event => {
470+
ref.entered.subscribe(enterEvent => {
470471
this.entered.emit({
471-
container: event.container.data,
472+
container: enterEvent.container.data,
472473
item: this,
473-
currentIndex: event.currentIndex,
474+
currentIndex: enterEvent.currentIndex,
474475
});
475476
});
476477

477-
ref.exited.subscribe(event => {
478+
ref.exited.subscribe(exitEvent => {
478479
this.exited.emit({
479-
container: event.container.data,
480+
container: exitEvent.container.data,
480481
item: this,
481482
});
482483
});
483484

484-
ref.dropped.subscribe(event => {
485+
ref.dropped.subscribe(dropEvent => {
485486
this.dropped.emit({
486-
previousIndex: event.previousIndex,
487-
currentIndex: event.currentIndex,
488-
previousContainer: event.previousContainer.data,
489-
container: event.container.data,
490-
isPointerOverContainer: event.isPointerOverContainer,
487+
previousIndex: dropEvent.previousIndex,
488+
currentIndex: dropEvent.currentIndex,
489+
previousContainer: dropEvent.previousContainer.data,
490+
container: dropEvent.container.data,
491+
isPointerOverContainer: dropEvent.isPointerOverContainer,
491492
item: this,
492-
distance: event.distance,
493-
dropPoint: event.dropPoint,
493+
distance: dropEvent.distance,
494+
dropPoint: dropEvent.dropPoint,
495+
event: dropEvent.event,
494496
});
495497
});
496498
}

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

Lines changed: 10 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -357,16 +357,17 @@ export class CdkDropList<T = any> implements OnDestroy {
357357
});
358358
});
359359

360-
ref.dropped.subscribe(event => {
360+
ref.dropped.subscribe(dropEvent => {
361361
this.dropped.emit({
362-
previousIndex: event.previousIndex,
363-
currentIndex: event.currentIndex,
364-
previousContainer: event.previousContainer.data,
365-
container: event.container.data,
366-
item: event.item.data,
367-
isPointerOverContainer: event.isPointerOverContainer,
368-
distance: event.distance,
369-
dropPoint: event.dropPoint,
362+
previousIndex: dropEvent.previousIndex,
363+
currentIndex: dropEvent.currentIndex,
364+
previousContainer: dropEvent.previousContainer.data,
365+
container: dropEvent.container.data,
366+
item: dropEvent.item.data,
367+
isPointerOverContainer: dropEvent.isPointerOverContainer,
368+
distance: dropEvent.distance,
369+
dropPoint: dropEvent.dropPoint,
370+
event: dropEvent.event,
370371
});
371372

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

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

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,12 +13,16 @@ import {CdkDropList} from './directives/drop-list';
1313
export interface CdkDragStart<T = any> {
1414
/** Draggable that emitted the event. */
1515
source: CdkDrag<T>;
16+
/** Native event that started the drag sequence. */
17+
event: MouseEvent | TouchEvent;
1618
}
1719

1820
/** Event emitted when the user releases an item, before any animations have started. */
1921
export interface CdkDragRelease<T = any> {
2022
/** Draggable that emitted the event. */
2123
source: CdkDrag<T>;
24+
/** Native event that caused the release event. */
25+
event: MouseEvent | TouchEvent;
2226
}
2327

2428
/** Event emitted when the user stops dragging a draggable. */
@@ -29,6 +33,8 @@ export interface CdkDragEnd<T = any> {
2933
distance: {x: number; y: number};
3034
/** Position where the pointer was when the item was dropped */
3135
dropPoint: {x: number; y: number};
36+
/** Native event that caused the dragging to stop. */
37+
event: MouseEvent | TouchEvent;
3238
}
3339

3440
/** Event emitted when the user moves an item into a new drop container. */
@@ -70,6 +76,8 @@ export interface CdkDragDrop<T, O = T, I = any> {
7076
distance: {x: number; y: number};
7177
/** Position where the pointer was when the item was dropped */
7278
dropPoint: {x: number; y: number};
79+
/** Native event that caused the drop event. */
80+
event: MouseEvent | TouchEvent;
7381
}
7482

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

0 commit comments

Comments
 (0)