diff --git a/src/cdk/drag-drop/directives/drag.spec.ts b/src/cdk/drag-drop/directives/drag.spec.ts index dcac4f49d05a..c1b8cf041c54 100644 --- a/src/cdk/drag-drop/directives/drag.spec.ts +++ b/src/cdk/drag-drop/directives/drag.spec.ts @@ -1132,6 +1132,34 @@ describe('CdkDrag', () => { subscription.unsubscribe(); })); + it('should prevent the default `mousemove` action even before the drag threshold has ' + + 'been reached', fakeAsync(() => { + const fixture = createComponent(StandaloneDraggable, [], 5); + fixture.detectChanges(); + const dragElement = fixture.componentInstance.dragElement.nativeElement; + + dispatchMouseEvent(dragElement, 'mousedown', 2, 2); + fixture.detectChanges(); + const mousemoveEvent = dispatchMouseEvent(document, 'mousemove', 2, 2); + fixture.detectChanges(); + + expect(mousemoveEvent.defaultPrevented).toBe(true); + })); + + it('should prevent the default `touchmove` action even before the drag threshold has ' + + 'been reached', fakeAsync(() => { + const fixture = createComponent(StandaloneDraggable, [], 5); + fixture.detectChanges(); + const dragElement = fixture.componentInstance.dragElement.nativeElement; + + dispatchTouchEvent(dragElement, 'touchstart', 2, 2); + fixture.detectChanges(); + const touchmoveEvent = dispatchTouchEvent(document, 'touchmove', 2, 2); + fixture.detectChanges(); + + expect(touchmoveEvent.defaultPrevented).toBe(true); + })); + }); describe('draggable with a handle', () => { diff --git a/src/cdk/drag-drop/drag-ref.ts b/src/cdk/drag-drop/drag-ref.ts index fac3ab655dc0..56f4ebade056 100644 --- a/src/cdk/drag-drop/drag-ref.ts +++ b/src/cdk/drag-drop/drag-ref.ts @@ -525,6 +525,10 @@ export class DragRef { /** Handler that is invoked when the user moves their pointer after they've initiated a drag. */ private _pointerMove = (event: MouseEvent | TouchEvent) => { + // Prevent the default action as early as possible in order to block + // native actions like dragging the selected text or images with the mouse. + event.preventDefault(); + if (!this._hasStartedDragging) { const pointerPosition = this._getPointerPositionOnPage(event); const distanceX = Math.abs(pointerPosition.x - this._pickupPositionOnPage.x); @@ -565,7 +569,6 @@ export class DragRef { const constrainedPointerPosition = this._getConstrainedPointerPosition(event); this._hasMoved = true; - event.preventDefault(); this._updatePointerDirectionDelta(constrainedPointerPosition); if (this._dropContainer) {