Method _startDragSequence

src/cdk/drag-drop/drag-ref.ts:888–962

Starts the dragging sequence.

(event: MouseEvent | TouchEvent)

  /** Starts the dragging sequence. */
  private _startDragSequence(event: MouseEvent | TouchEvent) {
    if (isTouchEvent(event)) {
      this._lastTouchEventTime = Date.now();
    }

    this._toggleNativeDragInteractions();

    // Needs to happen before the root element is moved.
    const shadowRoot = this._getShadowRoot();
    const dropContainer = this._dropContainer;

    if (shadowRoot) {
      // In some browsers the global `selectstart` that we maintain in the `DragDropRegistry`
      // doesn't cross the shadow boundary so we have to prevent it at the shadow root (see #28792).
      this._ngZone.runOutsideAngular(() => {
        this._cleanupShadowRootSelectStart = this._renderer.listen(
          shadowRoot,
          'selectstart',
          shadowDomSelectStart,
          activeCapturingEventOptions,
        );
      });
    }

    if (dropContainer) {
      const element = this._rootElement;
      const parent = element.parentNode as HTMLElement;
      const placeholder = (this._placeholder = this._createPlaceholderElement());
      const marker = (this._marker =
        this._marker ||
        this._document.createComment(
          typeof ngDevMode === 'undefined' || ngDevMode ? 'cdk-drag-marker' : '',
        ));

      // Insert a marker node so that we can restore the element's position in the DOM.
      parent.insertBefore(marker, element);

      // There's no risk of transforms stacking when inside a drop container so
      // we can keep the initial transform up to date any time dragging starts.
      this._initialTransform = element.style.transform || '';

      // Create the preview after the initial transform has
      // been cached, because it can be affected by the transform.
      this._preview = new PreviewRef(
        this._document,
        this._rootElement,
        this._direction,
        this._initialDomRect!,
        this._previewTemplate || null,
        this.previewClass || null,
        this._pickupPositionOnPage,
        this._initialTransform,
        this._config.zIndex || 1000,
        this._renderer,
      );
      this._preview.attach(this._getPreviewInsertionPoint(parent, shadowRoot));

      // We move the element out at the end of the body and we make it hidden, because keeping it in