Angular Material拖拽图片修改预览尺寸后鼠标偏移问题解决

问题场景 #

在Angular项目中，给<img>元素绑定cdkDrag指令（外层包裹<div>，仅允许拖动图片），设置.cdk-drag-preview的宽高为50px后，拖动时图片缩小，但鼠标指针偏移到图片外侧，无法保持在图片上方。需求为：图片拖动前保持原尺寸，拖动时缩小至50px，需修复鼠标偏移问题。

当前使用的CSS代码：

.cdk-drag-preview {
  width: 50px !important;
  height: 50px !important;
}

问题原因 #

CDK Drag的预览元素默认基于原元素的点击位置计算偏移，当强制修改预览元素的宽高后，原偏移逻辑未适配新尺寸，导致鼠标位置与预览图片错位。

解决方案 #

以下三种方案均可解决该问题，可根据项目场景选择：

方案一：自定义预览模板+锚点调整 #

通过cdkDragPreview指定自定义预览模板，同时设置预览元素的变换原点，确保鼠标对齐图片中心：

1. 模板代码：

<!-- 定义自定义预览模板 -->
<ng-template #dragPreview let-imgData>
  <img [src]="imgData.src" style="width:50px;height:50px;" />
</ng-template>

<div>
  <img 
    [src]="yourImageUrl" 
    cdkDrag 
    [cdkDragPreview]="dragPreview"
    [cdkDragData]="{src: yourImageUrl}"
  />
</div>

2. 补充CSS：

.cdk-drag-preview {
  transform-origin: center center !important;
  margin: 0;
}

方案二：CSS定位修正偏移 #

通过调整预览元素的transform和定位属性，让预览图片的中心对齐鼠标位置：

.cdk-drag-preview {
  width: 50px !important;
  height: 50px !important;
  transform: translate(-50%, -50%) !important;
  position: relative;
  top: 50%;
  left: 50%;
}

方案三：事件驱动动态调整缩放 #

在拖动开始时，根据原图片尺寸计算缩放比例，动态调整预览元素的变换属性，确保鼠标位置匹配：

1. 组件类代码：

import { CdkDragStart } from '@angular/cdk/drag-drop';

// ...

onDragStart(event: CdkDragStart) {
  const preview = document.querySelector('.cdk-drag-preview') as HTMLElement;
  const originalImg = event.source.element.nativeElement as HTMLImageElement;
  
  if (preview && originalImg) {
    const scaleX = 50 / originalImg.offsetWidth;
    const scaleY = 50 / originalImg.offsetHeight;
    // 缩放同时修正偏移，让鼠标保持在图片中心
    preview.style.transform = `scale(${scaleX}, ${scaleY}) translate(-${(1 - scaleX)/2 * 100}%, -${(1 - scaleY)/2 * 100}%)`;
  }
}

2. 模板代码：

<img 
  [src]="yourImageUrl" 
  cdkDrag 
  (cdkDragStarted)="onDragStart($event)"
/>

3. 调整CSS：

.cdk-drag-preview {
  transform-origin: center center !important;
  /* 移除固定宽高，改用scale缩放 */
}

效果说明 #

以上方案均能实现：拖动前图片保持原尺寸，拖动时缩小至50px，同时鼠标指针始终保持在图片上方，无偏移问题。

内容的提问来源于stack exchange，提问作者janaka ravindra