From e7bf94483b822176d137017eb522022157d54200 Mon Sep 17 00:00:00 2001 From: "Lincoln Baxter, III" Date: Tue, 12 May 2020 14:42:42 -0400 Subject: [PATCH] feat(cdk/drag-drop): support configurable propagation of mousedown and touchstart events. Allows exposing native mousedown and touchstart events to parent elements so that listeners farther up the chain can respond before a CdkDragEvent has started. Without these events, certain gestures (swiper, etc) cannot be achieved when events are started on a DragRef element. Fixes: https://github.com/angular/components/issues/19333 --- src/cdk/drag-drop/directives/drag.ts | 1 + src/cdk/drag-drop/drag-drop.ts | 3 ++- src/cdk/drag-drop/drag-ref.ts | 11 ++++++++++- 3 files changed, 13 insertions(+), 2 deletions(-) diff --git a/src/cdk/drag-drop/directives/drag.ts b/src/cdk/drag-drop/directives/drag.ts index ebd80933f645..cc4927b0d46b 100644 --- a/src/cdk/drag-drop/directives/drag.ts +++ b/src/cdk/drag-drop/directives/drag.ts @@ -199,6 +199,7 @@ export class CdkDrag implements AfterViewInit, OnChanges, OnDestroy { config.dragStartThreshold : 5, pointerDirectionChangeThreshold: config && config.pointerDirectionChangeThreshold != null ? config.pointerDirectionChangeThreshold : 5, + propagateEvents: coerceBooleanProperty(config && config.propagateEvents), zIndex: config?.zIndex }); this._dragRef.data = this; diff --git a/src/cdk/drag-drop/drag-drop.ts b/src/cdk/drag-drop/drag-drop.ts index a62b3a356ba0..e180d3c1068f 100644 --- a/src/cdk/drag-drop/drag-drop.ts +++ b/src/cdk/drag-drop/drag-drop.ts @@ -16,7 +16,8 @@ import {DragDropRegistry} from './drag-drop-registry'; /** Default configuration to be used when creating a `DragRef`. */ const DEFAULT_CONFIG = { dragStartThreshold: 5, - pointerDirectionChangeThreshold: 5 + pointerDirectionChangeThreshold: 5, + propagateEvents: false }; /** diff --git a/src/cdk/drag-drop/drag-ref.ts b/src/cdk/drag-drop/drag-ref.ts index d972c5085f42..1a99d5a86a27 100644 --- a/src/cdk/drag-drop/drag-ref.ts +++ b/src/cdk/drag-drop/drag-ref.ts @@ -33,6 +33,13 @@ export interface DragRefConfig { */ pointerDirectionChangeThreshold: number; + /** + * Whether touch/mouse begin events should propagate to + * parent elements in the DOM when CDK initiates a drag + * sequence. + */ + propagateEvents: boolean; + /** `z-index` for the absolutely-positioned elements that are created by the drag item. */ zIndex?: number; } @@ -744,7 +751,9 @@ export class DragRef { // Always stop propagation for the event that initializes // the dragging sequence, in order to prevent it from potentially // starting another sequence for a draggable parent somewhere up the DOM tree. - event.stopPropagation(); + if (!this._config.propagateEvents) { + event.stopPropagation(); + } const isDragging = this.isDragging(); const isTouchSequence = isTouchEvent(event);