fix(drag-drop): preview position relative to cursor thrown off if ite…

…m has margin (#16180)

Fixes the preview shifting sideways relative to the cursor, if the item that's being dragged has a margin.

Fixes #16171.

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

@@ -1765,6 +1765,8 @@ describe('CdkDrag', () => {
       expect(previewRect.height).toBe(itemRect.height, 'Expected preview height to match element');
       expect(preview.style.pointerEvents)
           .toBe('none', 'Expected pointer events to be disabled on the preview');
+      // Use a regex here since some browsers normalize 0 to 0px, but others don't.
+      expect(preview.style.margin).toMatch(/^0(px)?$/, 'Expected the preview margin to be reset.');
 
       dispatchMouseEvent(document, 'mouseup');
       fixture.detectChanges();

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

@@ -867,6 +867,8 @@ export class DragRef<T = any> {
       // It's important that we disable the pointer events on the preview, because
       // it can throw off the `document.elementFromPoint` calls in the `CdkDropList`.
       pointerEvents: 'none',
+      // We have to reset the margin, because can throw off positioning relative to the viewport.
+      margin: '0',
       position: 'fixed',
       top: '0',
       left: '0',