我之前在做Canvas图形拖拽的时候也踩过类似的坑，咱们一步步来梳理问题和解决方案：

一、先排查原生拖拽事件不触发的核心原因 #

你当前的模板代码里有两个关键问题导致拖拽事件没反应：

1. draggable属性绑定错误：直接写draggable="true"会被Angular解析成字符串值，而不是布尔值，浏览器可能不会识别这个元素为可拖拽对象。需要改成属性绑定形式：[draggable]="true"
2. dragover事件未阻止默认行为：浏览器默认不允许元素接受拖拽内容，必须在dragover事件中调用event.preventDefault()，否则drop事件永远不会触发。

修正后的原生拖拽模板代码 #

<!-- editor.component.html -->
<div #rendererContainer 
     [draggable]="true" 
     (dragstart)="onDragStart($event)" 
     (dragover)="onDragOver($event)" 
     (drop)="onDragEnd($event)" 
     (dragend)="onDragEnd($event)">
</div>

对应组件类的事件处理 #

onDragStart(event: DragEvent) {
  // 必须设置dataTransfer内容，部分浏览器要求这个才能触发后续事件
  if (event.dataTransfer) {
    event.dataTransfer.setData('text/plain', 'canvas-shape-drag');
    event.dataTransfer.effectAllowed = 'move';
  }
}

onDragOver(event: DragEvent) {
  // 阻止默认行为，允许drop事件触发
  event.preventDefault();
  event.stopPropagation();
}

onDragEnd(event: DragEvent) {
  // 处理拖拽结束逻辑
  event.preventDefault();
}

二、更适合Canvas图形的拖拽方案：鼠标事件自定义拖拽 #

不过要注意：原生拖拽事件主要针对DOM元素，而Canvas内部的图形是绘制出来的虚拟元素，没有对应的DOM节点。如果你的需求是拖拽Canvas上的图形元素，用**鼠标事件（mousedown/mousemove/mouseup）**实现会更灵活精确。

推荐的实现代码 #

模板部分

<!-- editor.component.html -->
<div #rendererContainer>
  <canvas #canvasElement 
          (mousedown)="onMouseDown($event)" 
          (mousemove)="onMouseMove($event)" 
          (mouseup)="onMouseUp($event)"
          (mouseleave)="onMouseUp($event)"></canvas>
</div>

组件类逻辑

import { Component, ViewChild, ElementRef } from '@angular/core';

@Component({
  selector: 'app-editor',
  templateUrl: './editor.component.html',
  styleUrls: ['./editor.component.css']
})
export class EditorComponent {
  @ViewChild('canvasElement') canvasElement!: ElementRef<HTMLCanvasElement>;
  private ctx: CanvasRenderingContext2D | null = null;
  private isDragging = false;
  // 拖拽起点与图形的偏移量，避免点击图形边缘时瞬移
  private dragOffset = { x: 0, y: 0 };
  // 示例图形的位置
  private shapePos = { x: 50, y: 50 };
  private shapeSize = { width: 100, height: 100 };

  ngAfterViewInit() {
    this.ctx = this.canvasElement.nativeElement.getContext('2d');
    this.drawShape();
  }

  onMouseDown(event: MouseEvent) {
    const rect = this.canvasElement.nativeElement.getBoundingClientRect();
    const mouseX = event.clientX - rect.left;
    const mouseY = event.clientY - rect.top;

    // 判断是否点击到目标图形
    if (mouseX >= this.shapePos.x && mouseX <= this.shapePos.x + this.shapeSize.width &&
        mouseY >= this.shapePos.y && mouseY <= this.shapePos.y + this.shapeSize.height) {
      this.isDragging = true;
      // 记录鼠标相对于图形左上角的偏移
      this.dragOffset.x = mouseX - this.shapePos.x;
      this.dragOffset.y = mouseY - this.shapePos.y;
    }
  }

  onMouseMove(event: MouseEvent) {
    if (!this.isDragging) return;

    const rect = this.canvasElement.nativeElement.getBoundingClientRect();
    const mouseX = event.clientX - rect.left;
    const mouseY = event.clientY - rect.top;

    // 更新图形位置
    this.shapePos.x = mouseX - this.dragOffset.x;
    this.shapePos.y = mouseY - this.dragOffset.y;
    this.drawShape();
  }

  onMouseUp() {
    this.isDragging = false;
  }

  private drawShape() {
    if (!this.ctx) return;
    // 清除画布
    this.ctx.clearRect(0, 0, this.canvasElement.nativeElement.width, this.canvasElement.nativeElement.height);
    // 绘制示例矩形
    this.ctx.fillStyle = '#4285F4';
    this.ctx.fillRect(this.shapePos.x, this.shapePos.y, this.shapeSize.width, this.shapeSize.height);
  }
}

这种方案的优势在于：可以精确控制每个Canvas图形的拖拽逻辑，支持多图形区分拖拽，完全符合你“拖拽Canvas上图形元素而非Canvas本身”的需求。

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