你可以在一个变量中存储鼠标按下时的偏移量，

offset:any=null

  setStyle(event: MouseEvent) {
    const rect = (event.target as HTMLElement).getBoundingClientRect();
    this.offset={x:event.offsetX*50/rect.width,y:event.offsetY*50/rect.height };
  }
  public onDragMove(event: CdkDragMove<any>): void {
    const el=(document.getElementsByClassName('cdk-drag-preview')[0])as any
    const xPos = event.pointerPosition.x - this.offset.x;
    const yPos = event.pointerPosition.y - this.offset.y;
    el.style.transform = `translate3d(${xPos}px, ${yPos}px, 0)`;
  }

的.html

<div class="dragItem"  >
  <img cdkDrag  src="..."
       (mousedown)="setStyle($event)" 
       (cdkDragMoved)="onDragMove($event)"
  />
</div>

注意：请注意，我从外部div中删除了de cdkDrag

使用cdkDragPreview元素设置其内部的width和height属性。这将创建一个新的元素，该元素仅在拖动过程中出现，不会影响原始元素的大小。

<div class="container">
  <div cdkDragBoundary>
    <!-- Original -->
    <img cdkDrag src="image.jpg">
    <div class="item">Item to drag</div>
  </div>
  <!-- Preview -->
  <div cdkDragPreview>
    <img src="image.jpg" class="preview-image">
  </div>
</div>

根据您的需要调整样式：

.cdk-drag-preview {
  /* No need width or height */
}

.cdkDragPreview .preview-image {
  width: 50px;
  height: 50px;
}

.container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 500px;
}

.item {
  width: 200px;
  height: 200px;
}

现在预览元素与较小的图像大小，而拖动，但原始。元素保持相同的大小。