fix(drag-drop): use passive event listeners for start events (#13526)

This commit is contained in:
Kristiyan Kostadinov
2018-10-19 17:10:56 +02:00
committed by Joey Perrott
parent 676ce3b285
commit 280b0d6878
+11 -4
View File
@@ -28,6 +28,7 @@ import {
SkipSelf,
ViewContainerRef,
} from '@angular/core';
import {supportsPassiveEventListeners} from '@angular/cdk/platform';
import {Observable, Subject, Subscription, Observer} from 'rxjs';
import {take} from 'rxjs/operators';
import {DragDropRegistry} from './drag-drop-registry';
@@ -77,6 +78,10 @@ export function CDK_DRAG_CONFIG_FACTORY(): CdkDragConfig {
return {dragStartThreshold: 5, pointerDirectionChangeThreshold: 5};
}
/** Options that can be used to bind a passive event listener. */
const passiveEventListenerOptions = supportsPassiveEventListeners() ?
{passive: true} as EventListenerOptions : false;
/** Element that can be moved inside a CdkDropList container. */
@Directive({
selector: '[cdkDrag]',
@@ -255,15 +260,17 @@ export class CdkDrag<T = any> implements AfterViewInit, OnDestroy {
// their original DOM position and then they get transferred to the portal.
this._ngZone.onStable.asObservable().pipe(take(1)).subscribe(() => {
const rootElement = this._rootElement = this._getRootElement();
rootElement.addEventListener('mousedown', this._pointerDown);
rootElement.addEventListener('touchstart', this._pointerDown);
rootElement.addEventListener('mousedown', this._pointerDown, passiveEventListenerOptions);
rootElement.addEventListener('touchstart', this._pointerDown, passiveEventListenerOptions);
toggleNativeDragInteractions(rootElement , false);
});
}
ngOnDestroy() {
this._rootElement.removeEventListener('mousedown', this._pointerDown);
this._rootElement.removeEventListener('touchstart', this._pointerDown);
this._rootElement.removeEventListener('mousedown', this._pointerDown,
passiveEventListenerOptions);
this._rootElement.removeEventListener('touchstart', this._pointerDown,
passiveEventListenerOptions);
this._destroyPreview();
this._destroyPlaceholder();