Skip to content

Commit 74e42b2

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 8e141ef commit 74e42b2

File tree

7 files changed

+113
-61
lines changed

7 files changed

+113
-61
lines changed

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

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

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

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

@@ -374,15 +378,17 @@ describe('CdkDrag', () => {
374378

375379
expect(event).toEqual({
376380
source: jasmine.anything(),
377-
distance: {x: 25, y: 30}
381+
distance: {x: 25, y: 30},
382+
event: jasmine.anything()
378383
});
379384

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

383388
expect(event).toEqual({
384389
source: jasmine.anything(),
385-
distance: {x: 40, y: 50}
390+
distance: {x: 40, y: 50},
391+
event: jasmine.anything()
386392
});
387393
}));
388394

@@ -1382,7 +1388,8 @@ describe('CdkDrag', () => {
13821388
container: fixture.componentInstance.dropInstance,
13831389
previousContainer: fixture.componentInstance.dropInstance,
13841390
isPointerOverContainer: true,
1385-
distance: {x: jasmine.any(Number), y: jasmine.any(Number)}
1391+
distance: {x: jasmine.any(Number), y: jasmine.any(Number)},
1392+
event: jasmine.anything()
13861393
});
13871394

13881395
expect(dragItems.map(drag => drag.element.nativeElement.textContent!.trim()))
@@ -1508,7 +1515,8 @@ describe('CdkDrag', () => {
15081515
container: fixture.componentInstance.dropInstance,
15091516
previousContainer: fixture.componentInstance.dropInstance,
15101517
isPointerOverContainer: false,
1511-
distance: {x: jasmine.any(Number), y: jasmine.any(Number)}
1518+
distance: {x: jasmine.any(Number), y: jasmine.any(Number)},
1519+
event: jasmine.anything()
15121520
});
15131521

15141522
expect(dragItems.map(drag => drag.element.nativeElement.textContent!.trim()))
@@ -1567,7 +1575,8 @@ describe('CdkDrag', () => {
15671575
container: fixture.componentInstance.dropInstance,
15681576
previousContainer: fixture.componentInstance.dropInstance,
15691577
isPointerOverContainer: true,
1570-
distance: {x: jasmine.any(Number), y: jasmine.any(Number)}
1578+
distance: {x: jasmine.any(Number), y: jasmine.any(Number)},
1579+
event: jasmine.anything()
15711580
});
15721581

15731582
expect(dragItems.map(drag => drag.element.nativeElement.textContent!.trim()))
@@ -1608,7 +1617,8 @@ describe('CdkDrag', () => {
16081617
container: fixture.componentInstance.dropInstance,
16091618
previousContainer: fixture.componentInstance.dropInstance,
16101619
isPointerOverContainer: true,
1611-
distance: {x: jasmine.any(Number), y: jasmine.any(Number)}
1620+
distance: {x: jasmine.any(Number), y: jasmine.any(Number)},
1621+
event: jasmine.anything()
16121622
});
16131623

16141624
expect(dragItems.map(drag => drag.element.nativeElement.textContent!.trim()))
@@ -1645,7 +1655,8 @@ describe('CdkDrag', () => {
16451655
container: fixture.componentInstance.dropInstance,
16461656
previousContainer: fixture.componentInstance.dropInstance,
16471657
isPointerOverContainer: false,
1648-
distance: {x: jasmine.any(Number), y: jasmine.any(Number)}
1658+
distance: {x: jasmine.any(Number), y: jasmine.any(Number)},
1659+
event: jasmine.anything()
16491660
});
16501661

16511662
expect(dragItems.map(drag => drag.element.nativeElement.textContent!.trim()))
@@ -1688,7 +1699,8 @@ describe('CdkDrag', () => {
16881699
container: fixture.componentInstance.dropInstance,
16891700
previousContainer: fixture.componentInstance.dropInstance,
16901701
isPointerOverContainer: jasmine.any(Boolean),
1691-
distance: {x: jasmine.any(Number), y: jasmine.any(Number)}
1702+
distance: {x: jasmine.any(Number), y: jasmine.any(Number)},
1703+
event: jasmine.anything()
16921704
});
16931705
}));
16941706

@@ -1736,7 +1748,8 @@ describe('CdkDrag', () => {
17361748
container: fixture.componentInstance.dropInstance,
17371749
previousContainer: fixture.componentInstance.dropInstance,
17381750
isPointerOverContainer: jasmine.any(Boolean),
1739-
distance: {x: jasmine.any(Number), y: jasmine.any(Number)}
1751+
distance: {x: jasmine.any(Number), y: jasmine.any(Number)},
1752+
event: jasmine.anything()
17401753
});
17411754

17421755
scrollTo(0, 0);
@@ -2930,7 +2943,8 @@ describe('CdkDrag', () => {
29302943
container: dropInstance,
29312944
previousContainer: dropInstance,
29322945
isPointerOverContainer: true,
2933-
distance: {x: jasmine.any(Number), y: jasmine.any(Number)}
2946+
distance: {x: jasmine.any(Number), y: jasmine.any(Number)},
2947+
event: jasmine.anything()
29342948
});
29352949

29362950
expect(dragItems.map(drag => drag.element.nativeElement.textContent!.trim()))
@@ -3309,7 +3323,8 @@ describe('CdkDrag', () => {
33093323
container: fixture.componentInstance.dropInstances.toArray()[1],
33103324
previousContainer: fixture.componentInstance.dropInstances.first,
33113325
isPointerOverContainer: true,
3312-
distance: {x: jasmine.any(Number), y: jasmine.any(Number)}
3326+
distance: {x: jasmine.any(Number), y: jasmine.any(Number)},
3327+
event: jasmine.anything()
33133328
});
33143329
}));
33153330

@@ -3412,7 +3427,8 @@ describe('CdkDrag', () => {
34123427
container: dropInstances[1],
34133428
previousContainer: dropInstances[0],
34143429
isPointerOverContainer: true,
3415-
distance: {x: jasmine.any(Number), y: jasmine.any(Number)}
3430+
distance: {x: jasmine.any(Number), y: jasmine.any(Number)},
3431+
event: jasmine.anything()
34163432
});
34173433
}));
34183434

@@ -3443,7 +3459,8 @@ describe('CdkDrag', () => {
34433459
container: dropInstances[0],
34443460
previousContainer: dropInstances[0],
34453461
isPointerOverContainer: false,
3446-
distance: {x: jasmine.any(Number), y: jasmine.any(Number)}
3462+
distance: {x: jasmine.any(Number), y: jasmine.any(Number)},
3463+
event: jasmine.anything()
34473464
});
34483465
}));
34493466

@@ -3474,7 +3491,8 @@ describe('CdkDrag', () => {
34743491
container: dropInstances[0],
34753492
previousContainer: dropInstances[0],
34763493
isPointerOverContainer: false,
3477-
distance: {x: jasmine.any(Number), y: jasmine.any(Number)}
3494+
distance: {x: jasmine.any(Number), y: jasmine.any(Number)},
3495+
event: jasmine.anything()
34783496
});
34793497
}));
34803498

@@ -3598,7 +3616,8 @@ describe('CdkDrag', () => {
35983616
container: dropInstances[1],
35993617
previousContainer: dropInstances[0],
36003618
isPointerOverContainer: true,
3601-
distance: {x: jasmine.any(Number), y: jasmine.any(Number)}
3619+
distance: {x: jasmine.any(Number), y: jasmine.any(Number)},
3620+
event: jasmine.anything()
36023621
});
36033622
}));
36043623

@@ -3625,7 +3644,8 @@ describe('CdkDrag', () => {
36253644
container: dropInstances[1],
36263645
previousContainer: dropInstances[0],
36273646
isPointerOverContainer: true,
3628-
distance: {x: jasmine.any(Number), y: jasmine.any(Number)}
3647+
distance: {x: jasmine.any(Number), y: jasmine.any(Number)},
3648+
event: jasmine.anything()
36293649
});
36303650
}));
36313651

@@ -3657,7 +3677,8 @@ describe('CdkDrag', () => {
36573677
container: dropInstances[1],
36583678
previousContainer: dropInstances[0],
36593679
isPointerOverContainer: true,
3660-
distance: {x: jasmine.any(Number), y: jasmine.any(Number)}
3680+
distance: {x: jasmine.any(Number), y: jasmine.any(Number)},
3681+
event: jasmine.anything()
36613682
});
36623683
}));
36633684

@@ -3693,7 +3714,8 @@ describe('CdkDrag', () => {
36933714
container: fixture.componentInstance.dropInstances.toArray()[1],
36943715
previousContainer: fixture.componentInstance.dropInstances.first,
36953716
isPointerOverContainer: true,
3696-
distance: {x: jasmine.any(Number), y: jasmine.any(Number)}
3717+
distance: {x: jasmine.any(Number), y: jasmine.any(Number)},
3718+
event: jasmine.anything()
36973719
});
36983720

36993721
expect(dropContainers[0].contains(item.element.nativeElement)).toBe(true,
@@ -3790,7 +3812,8 @@ describe('CdkDrag', () => {
37903812
container: dropInstances[0],
37913813
previousContainer: dropInstances[0],
37923814
isPointerOverContainer: false,
3793-
distance: {x: jasmine.any(Number), y: jasmine.any(Number)}
3815+
distance: {x: jasmine.any(Number), y: jasmine.any(Number)},
3816+
event: jasmine.anything()
37943817
});
37953818
}));
37963819

@@ -3911,7 +3934,8 @@ describe('CdkDrag', () => {
39113934
container: dropInstances[2],
39123935
previousContainer: dropInstances[0],
39133936
isPointerOverContainer: false,
3914-
distance: {x: jasmine.any(Number), y: jasmine.any(Number)}
3937+
distance: {x: jasmine.any(Number), y: jasmine.any(Number)},
3938+
event: jasmine.anything()
39153939
}));
39163940

39173941
}));
@@ -4128,7 +4152,8 @@ describe('CdkDrag', () => {
41284152
container: fixture.componentInstance.dropInstances.toArray()[1],
41294153
previousContainer: fixture.componentInstance.dropInstances.first,
41304154
isPointerOverContainer: true,
4131-
distance: {x: jasmine.any(Number), y: jasmine.any(Number)}
4155+
distance: {x: jasmine.any(Number), y: jasmine.any(Number)},
4156+
event: jasmine.anything()
41324157
});
41334158

41344159
cleanup();
@@ -4163,7 +4188,8 @@ describe('CdkDrag', () => {
41634188
container: fixture.componentInstance.dropInstances.toArray()[1],
41644189
previousContainer: fixture.componentInstance.dropInstances.first,
41654190
isPointerOverContainer: true,
4166-
distance: {x: jasmine.any(Number), y: jasmine.any(Number)}
4191+
distance: {x: jasmine.any(Number), y: jasmine.any(Number)},
4192+
event: jasmine.anything()
41674193
});
41684194
}));
41694195

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

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

356356
/** Handles the events from the underlying `DragRef`. */
357357
private _handleEvents(ref: DragRef<CdkDrag<T>>) {
358-
ref.started.subscribe(() => {
359-
this.started.emit({source: this});
358+
ref.started.subscribe(startEvent => {
359+
this.started.emit({source: this, event: startEvent.event});
360360

361361
// Since all of these events run outside of change detection,
362362
// we need to ensure that everything is marked correctly.
363363
this._changeDetectorRef.markForCheck();
364364
});
365365

366-
ref.released.subscribe(() => {
367-
this.released.emit({source: this});
366+
ref.released.subscribe(releaseEvent => {
367+
this.released.emit({source: this, event: releaseEvent.event});
368368
});
369369

370-
ref.ended.subscribe(event => {
371-
this.ended.emit({source: this, distance: event.distance});
370+
ref.ended.subscribe(endEvent => {
371+
this.ended.emit({source: this, distance: endEvent.distance, event: endEvent.event});
372372

373373
// Since all of these events run outside of change detection,
374374
// we need to ensure that everything is marked correctly.
375375
this._changeDetectorRef.markForCheck();
376376
});
377377

378-
ref.entered.subscribe(event => {
378+
ref.entered.subscribe(enterEvent => {
379379
this.entered.emit({
380-
container: event.container.data,
380+
container: enterEvent.container.data,
381381
item: this,
382-
currentIndex: event.currentIndex
382+
currentIndex: enterEvent.currentIndex
383383
});
384384
});
385385

386-
ref.exited.subscribe(event => {
386+
ref.exited.subscribe(exitEvent => {
387387
this.exited.emit({
388-
container: event.container.data,
388+
container: exitEvent.container.data,
389389
item: this
390390
});
391391
});
392392

393-
ref.dropped.subscribe(event => {
393+
ref.dropped.subscribe(dropEvent => {
394394
this.dropped.emit({
395-
previousIndex: event.previousIndex,
396-
currentIndex: event.currentIndex,
397-
previousContainer: event.previousContainer.data,
398-
container: event.container.data,
399-
isPointerOverContainer: event.isPointerOverContainer,
395+
previousIndex: dropEvent.previousIndex,
396+
currentIndex: dropEvent.currentIndex,
397+
previousContainer: dropEvent.previousContainer.data,
398+
container: dropEvent.container.data,
399+
isPointerOverContainer: dropEvent.isPointerOverContainer,
400400
item: this,
401-
distance: event.distance
401+
distance: dropEvent.distance,
402+
event: dropEvent.event
402403
});
403404
});
404405
}

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

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

316-
ref.dropped.subscribe(event => {
316+
ref.dropped.subscribe(dropEvent => {
317317
this.dropped.emit({
318-
previousIndex: event.previousIndex,
319-
currentIndex: event.currentIndex,
320-
previousContainer: event.previousContainer.data,
321-
container: event.container.data,
322-
item: event.item.data,
323-
isPointerOverContainer: event.isPointerOverContainer,
324-
distance: event.distance
318+
previousIndex: dropEvent.previousIndex,
319+
currentIndex: dropEvent.currentIndex,
320+
previousContainer: dropEvent.previousContainer.data,
321+
container: dropEvent.container.data,
322+
item: dropEvent.item.data,
323+
isPointerOverContainer: dropEvent.isPointerOverContainer,
324+
distance: dropEvent.distance,
325+
event: dropEvent.event
325326
});
326327

327328
// 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)