fix(cdk/drag-drop): stop pointer events on placeholder

Removes the pointer events from the drag placeholder so that the user can't interact with it while the preview is animating.

Fixes #24403.

Author: crisbeto

src/cdk/drag-drop/directives/drag.spec.ts

@@ -2952,6 +2952,9 @@ describe('CdkDrag', () => {
       expect(placeholder.textContent!.trim())
         .withContext('Expected placeholder content to match element')
         .toContain('One');
+      expect(placeholder.style.pointerEvents)
+        .withContext('Expected pointer events to be disabled on placeholder')
+        .toBe('none');
 
       dispatchMouseEvent(document, 'mouseup');
       fixture.detectChanges();

src/cdk/drag-drop/drag-ref.ts

@@ -1159,6 +1159,9 @@ export class DragRef<T = any> {
       placeholder = deepCloneNode(this._rootElement);
     }
 
+    // Stop pointer events on the preview so the user can't
+    // interact with it while the preview is animating.
+    placeholder.style.pointerEvents = 'none';
     placeholder.classList.add('cdk-drag-placeholder');
     return placeholder;
   }