Skip to content

Commit a421c9f

Browse files
crisbetocrisbeto
committed
feat(drag-drop): expose native event objects in custom events
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 9343d08 commit a421c9f

File tree

7 files changed

+113
-62
lines changed

7 files changed

+113
-62
lines changed

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

Lines changed: 50 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -345,7 +345,10 @@ describe('CdkDrag', () => {
345345

346346
// Assert the event like this, rather than `toHaveBeenCalledWith`, because Jasmine will
347347
// go into an infinite loop trying to stringify the event, if the test fails.
348-
expect(event).toEqual({source: fixture.componentInstance.dragInstance});
348+
expect(event).toEqual({
349+
source: fixture.componentInstance.dragInstance,
350+
event: jasmine.anything()
351+
});
349352
}));
350353

351354
it('should dispatch an event when the user has stopped dragging', fakeAsync(() => {
@@ -362,7 +365,8 @@ describe('CdkDrag', () => {
362365
// go into an infinite loop trying to stringify the event, if the test fails.
363366
expect(event).toEqual({
364367
source: fixture.componentInstance.dragInstance,
365-
distance: {x: jasmine.any(Number), y: jasmine.any(Number)}
368+
distance: {x: jasmine.any(Number), y: jasmine.any(Number)},
369+
event: jasmine.anything()
366370
});
367371
}));
368372

@@ -375,15 +379,17 @@ describe('CdkDrag', () => {
375379

376380
expect(event).toEqual({
377381
source: jasmine.anything(),
378-
distance: {x: 25, y: 30}
382+
distance: {x: 25, y: 30},
383+
event: jasmine.anything()
379384
});
380385

381386
dragElementViaMouse(fixture, fixture.componentInstance.dragElement.nativeElement, 40, 50);
382387
event = fixture.componentInstance.endedSpy.calls.mostRecent().args[0];
383388

384389
expect(event).toEqual({
385390
source: jasmine.anything(),
386-
distance: {x: 40, y: 50}
391+
distance: {x: 40, y: 50},
392+
event: jasmine.anything()
387393
});
388394
}));
389395

@@ -1546,7 +1552,8 @@ describe('CdkDrag', () => {
15461552
container: fixture.componentInstance.dropInstance,
15471553
previousContainer: fixture.componentInstance.dropInstance,
15481554
isPointerOverContainer: true,
1549-
distance: {x: jasmine.any(Number), y: jasmine.any(Number)}
1555+
distance: {x: jasmine.any(Number), y: jasmine.any(Number)},
1556+
event: jasmine.anything()
15501557
});
15511558

15521559
expect(dragItems.map(drag => drag.element.nativeElement.textContent!.trim()))
@@ -1672,7 +1679,8 @@ describe('CdkDrag', () => {
16721679
container: fixture.componentInstance.dropInstance,
16731680
previousContainer: fixture.componentInstance.dropInstance,
16741681
isPointerOverContainer: false,
1675-
distance: {x: jasmine.any(Number), y: jasmine.any(Number)}
1682+
distance: {x: jasmine.any(Number), y: jasmine.any(Number)},
1683+
event: jasmine.anything()
16761684
});
16771685

16781686
expect(dragItems.map(drag => drag.element.nativeElement.textContent!.trim()))
@@ -1731,7 +1739,8 @@ describe('CdkDrag', () => {
17311739
container: fixture.componentInstance.dropInstance,
17321740
previousContainer: fixture.componentInstance.dropInstance,
17331741
isPointerOverContainer: true,
1734-
distance: {x: jasmine.any(Number), y: jasmine.any(Number)}
1742+
distance: {x: jasmine.any(Number), y: jasmine.any(Number)},
1743+
event: jasmine.anything()
17351744
});
17361745

17371746
expect(dragItems.map(drag => drag.element.nativeElement.textContent!.trim()))
@@ -1772,7 +1781,8 @@ describe('CdkDrag', () => {
17721781
container: fixture.componentInstance.dropInstance,
17731782
previousContainer: fixture.componentInstance.dropInstance,
17741783
isPointerOverContainer: true,
1775-
distance: {x: jasmine.any(Number), y: jasmine.any(Number)}
1784+
distance: {x: jasmine.any(Number), y: jasmine.any(Number)},
1785+
event: jasmine.anything()
17761786
});
17771787

17781788
expect(dragItems.map(drag => drag.element.nativeElement.textContent!.trim()))
@@ -1809,7 +1819,8 @@ describe('CdkDrag', () => {
18091819
container: fixture.componentInstance.dropInstance,
18101820
previousContainer: fixture.componentInstance.dropInstance,
18111821
isPointerOverContainer: false,
1812-
distance: {x: jasmine.any(Number), y: jasmine.any(Number)}
1822+
distance: {x: jasmine.any(Number), y: jasmine.any(Number)},
1823+
event: jasmine.anything()
18131824
});
18141825

18151826
expect(dragItems.map(drag => drag.element.nativeElement.textContent!.trim()))
@@ -1852,7 +1863,8 @@ describe('CdkDrag', () => {
18521863
container: fixture.componentInstance.dropInstance,
18531864
previousContainer: fixture.componentInstance.dropInstance,
18541865
isPointerOverContainer: jasmine.any(Boolean),
1855-
distance: {x: jasmine.any(Number), y: jasmine.any(Number)}
1866+
distance: {x: jasmine.any(Number), y: jasmine.any(Number)},
1867+
event: jasmine.anything()
18561868
});
18571869
}));
18581870

@@ -1900,7 +1912,8 @@ describe('CdkDrag', () => {
19001912
container: fixture.componentInstance.dropInstance,
19011913
previousContainer: fixture.componentInstance.dropInstance,
19021914
isPointerOverContainer: jasmine.any(Boolean),
1903-
distance: {x: jasmine.any(Number), y: jasmine.any(Number)}
1915+
distance: {x: jasmine.any(Number), y: jasmine.any(Number)},
1916+
event: jasmine.anything()
19041917
});
19051918

19061919
scrollTo(0, 0);
@@ -3172,7 +3185,8 @@ describe('CdkDrag', () => {
31723185
container: dropInstance,
31733186
previousContainer: dropInstance,
31743187
isPointerOverContainer: true,
3175-
distance: {x: jasmine.any(Number), y: jasmine.any(Number)}
3188+
distance: {x: jasmine.any(Number), y: jasmine.any(Number)},
3189+
event: jasmine.anything()
31763190
});
31773191

31783192
expect(dragItems.map(drag => drag.element.nativeElement.textContent!.trim()))
@@ -3724,7 +3738,8 @@ describe('CdkDrag', () => {
37243738
container: fixture.componentInstance.dropInstances.toArray()[1],
37253739
previousContainer: fixture.componentInstance.dropInstances.first,
37263740
isPointerOverContainer: true,
3727-
distance: {x: jasmine.any(Number), y: jasmine.any(Number)}
3741+
distance: {x: jasmine.any(Number), y: jasmine.any(Number)},
3742+
event: jasmine.anything()
37283743
});
37293744
}));
37303745

@@ -3827,7 +3842,8 @@ describe('CdkDrag', () => {
38273842
container: dropInstances[1],
38283843
previousContainer: dropInstances[0],
38293844
isPointerOverContainer: true,
3830-
distance: {x: jasmine.any(Number), y: jasmine.any(Number)}
3845+
distance: {x: jasmine.any(Number), y: jasmine.any(Number)},
3846+
event: jasmine.anything()
38313847
});
38323848
}));
38333849

@@ -3858,7 +3874,8 @@ describe('CdkDrag', () => {
38583874
container: dropInstances[0],
38593875
previousContainer: dropInstances[0],
38603876
isPointerOverContainer: false,
3861-
distance: {x: jasmine.any(Number), y: jasmine.any(Number)}
3877+
distance: {x: jasmine.any(Number), y: jasmine.any(Number)},
3878+
event: jasmine.anything()
38623879
});
38633880
}));
38643881

@@ -3889,7 +3906,8 @@ describe('CdkDrag', () => {
38893906
container: dropInstances[0],
38903907
previousContainer: dropInstances[0],
38913908
isPointerOverContainer: false,
3892-
distance: {x: jasmine.any(Number), y: jasmine.any(Number)}
3909+
distance: {x: jasmine.any(Number), y: jasmine.any(Number)},
3910+
event: jasmine.anything()
38933911
});
38943912
}));
38953913

@@ -4040,7 +4058,8 @@ describe('CdkDrag', () => {
40404058
container: dropInstances[1],
40414059
previousContainer: dropInstances[0],
40424060
isPointerOverContainer: true,
4043-
distance: {x: jasmine.any(Number), y: jasmine.any(Number)}
4061+
distance: {x: jasmine.any(Number), y: jasmine.any(Number)},
4062+
event: jasmine.anything()
40444063
});
40454064
}));
40464065

@@ -4067,7 +4086,8 @@ describe('CdkDrag', () => {
40674086
container: dropInstances[1],
40684087
previousContainer: dropInstances[0],
40694088
isPointerOverContainer: true,
4070-
distance: {x: jasmine.any(Number), y: jasmine.any(Number)}
4089+
distance: {x: jasmine.any(Number), y: jasmine.any(Number)},
4090+
event: jasmine.anything()
40714091
});
40724092
}));
40734093

@@ -4099,7 +4119,8 @@ describe('CdkDrag', () => {
40994119
container: dropInstances[1],
41004120
previousContainer: dropInstances[0],
41014121
isPointerOverContainer: true,
4102-
distance: {x: jasmine.any(Number), y: jasmine.any(Number)}
4122+
distance: {x: jasmine.any(Number), y: jasmine.any(Number)},
4123+
event: jasmine.anything()
41034124
});
41044125
}));
41054126

@@ -4135,7 +4156,8 @@ describe('CdkDrag', () => {
41354156
container: fixture.componentInstance.dropInstances.toArray()[1],
41364157
previousContainer: fixture.componentInstance.dropInstances.first,
41374158
isPointerOverContainer: true,
4138-
distance: {x: jasmine.any(Number), y: jasmine.any(Number)}
4159+
distance: {x: jasmine.any(Number), y: jasmine.any(Number)},
4160+
event: jasmine.anything()
41394161
});
41404162

41414163
expect(dropContainers[0].contains(item.element.nativeElement)).toBe(true,
@@ -4232,7 +4254,8 @@ describe('CdkDrag', () => {
42324254
container: dropInstances[0],
42334255
previousContainer: dropInstances[0],
42344256
isPointerOverContainer: false,
4235-
distance: {x: jasmine.any(Number), y: jasmine.any(Number)}
4257+
distance: {x: jasmine.any(Number), y: jasmine.any(Number)},
4258+
event: jasmine.anything()
42364259
});
42374260
}));
42384261

@@ -4353,7 +4376,8 @@ describe('CdkDrag', () => {
43534376
container: dropInstances[2],
43544377
previousContainer: dropInstances[0],
43554378
isPointerOverContainer: false,
4356-
distance: {x: jasmine.any(Number), y: jasmine.any(Number)}
4379+
distance: {x: jasmine.any(Number), y: jasmine.any(Number)},
4380+
event: jasmine.anything()
43574381
}));
43584382

43594383
}));
@@ -4570,7 +4594,8 @@ describe('CdkDrag', () => {
45704594
container: fixture.componentInstance.dropInstances.toArray()[1],
45714595
previousContainer: fixture.componentInstance.dropInstances.first,
45724596
isPointerOverContainer: true,
4573-
distance: {x: jasmine.any(Number), y: jasmine.any(Number)}
4597+
distance: {x: jasmine.any(Number), y: jasmine.any(Number)},
4598+
event: jasmine.anything()
45744599
});
45754600

45764601
cleanup();
@@ -4605,7 +4630,8 @@ describe('CdkDrag', () => {
46054630
container: fixture.componentInstance.dropInstances.toArray()[1],
46064631
previousContainer: fixture.componentInstance.dropInstances.first,
46074632
isPointerOverContainer: true,
4608-
distance: {x: jasmine.any(Number), y: jasmine.any(Number)}
4633+
distance: {x: jasmine.any(Number), y: jasmine.any(Number)},
4634+
event: jasmine.anything()
46094635
});
46104636
}));
46114637

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

Lines changed: 19 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -386,50 +386,51 @@ export class CdkDrag<T = any> implements AfterViewInit, OnChanges, OnDestroy {
386386

387387
/** Handles the events from the underlying `DragRef`. */
388388
private _handleEvents(ref: DragRef<CdkDrag<T>>) {
389-
ref.started.subscribe(() => {
390-
this.started.emit({source: this});
389+
ref.started.subscribe(startEvent => {
390+
this.started.emit({source: this, event: startEvent.event});
391391

392392
// Since all of these events run outside of change detection,
393393
// we need to ensure that everything is marked correctly.
394394
this._changeDetectorRef.markForCheck();
395395
});
396396

397-
ref.released.subscribe(() => {
398-
this.released.emit({source: this});
397+
ref.released.subscribe(releaseEvent => {
398+
this.released.emit({source: this, event: releaseEvent.event});
399399
});
400400

401-
ref.ended.subscribe(event => {
402-
this.ended.emit({source: this, distance: event.distance});
401+
ref.ended.subscribe(endEvent => {
402+
this.ended.emit({source: this, distance: endEvent.distance, event: endEvent.event});
403403

404404
// Since all of these events run outside of change detection,
405405
// we need to ensure that everything is marked correctly.
406406
this._changeDetectorRef.markForCheck();
407407
});
408408

409-
ref.entered.subscribe(event => {
409+
ref.entered.subscribe(enterEvent => {
410410
this.entered.emit({
411-
container: event.container.data,
411+
container: enterEvent.container.data,
412412
item: this,
413-
currentIndex: event.currentIndex
413+
currentIndex: enterEvent.currentIndex
414414
});
415415
});
416416

417-
ref.exited.subscribe(event => {
417+
ref.exited.subscribe(exitEvent => {
418418
this.exited.emit({
419-
container: event.container.data,
419+
container: exitEvent.container.data,
420420
item: this
421421
});
422422
});
423423

424-
ref.dropped.subscribe(event => {
424+
ref.dropped.subscribe(dropEvent => {
425425
this.dropped.emit({
426-
previousIndex: event.previousIndex,
427-
currentIndex: event.currentIndex,
428-
previousContainer: event.previousContainer.data,
429-
container: event.container.data,
430-
isPointerOverContainer: event.isPointerOverContainer,
426+
previousIndex: dropEvent.previousIndex,
427+
currentIndex: dropEvent.currentIndex,
428+
previousContainer: dropEvent.previousContainer.data,
429+
container: dropEvent.container.data,
430+
isPointerOverContainer: dropEvent.isPointerOverContainer,
431431
item: this,
432-
distance: event.distance
432+
distance: dropEvent.distance,
433+
event: dropEvent.event
433434
});
434435
});
435436
}

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

Lines changed: 9 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -363,15 +363,16 @@ export class CdkDropList<T = any> implements AfterContentInit, OnDestroy {
363363
});
364364
});
365365

366-
ref.dropped.subscribe(event => {
366+
ref.dropped.subscribe(dropEvent => {
367367
this.dropped.emit({
368-
previousIndex: event.previousIndex,
369-
currentIndex: event.currentIndex,
370-
previousContainer: event.previousContainer.data,
371-
container: event.container.data,
372-
item: event.item.data,
373-
isPointerOverContainer: event.isPointerOverContainer,
374-
distance: event.distance
368+
previousIndex: dropEvent.previousIndex,
369+
currentIndex: dropEvent.currentIndex,
370+
previousContainer: dropEvent.previousContainer.data,
371+
container: dropEvent.container.data,
372+
item: dropEvent.item.data,
373+
isPointerOverContainer: dropEvent.isPointerOverContainer,
374+
distance: dropEvent.distance,
375+
event: dropEvent.event
375376
});
376377

377378
// 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. */
@@ -27,6 +31,8 @@ export interface CdkDragEnd<T = any> {
2731
source: CdkDrag<T>;
2832
/** Distance in pixels that the user has dragged since the drag sequence started. */
2933
distance: {x: number, y: number};
34+
/** Native event that caused the dragging to stop. */
35+
event: MouseEvent | TouchEvent;
3036
}
3137

3238
/** Event emitted when the user moves an item into a new drop container. */
@@ -67,6 +73,8 @@ export interface CdkDragDrop<T, O = T> {
6773
isPointerOverContainer: boolean;
6874
/** Distance in pixels that the user has dragged since the drag sequence started. */
6975
distance: {x: number, y: number};
76+
/** Native event that caused the drop event. */
77+
event: MouseEvent | TouchEvent;
7078
}
7179

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

0 commit comments

Comments
 (0)