Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit ca6b9fa

Browse files
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)

AltStyle によって変換されたページ (->オリジナル) /