Angular文件拖拽范围过大：如何限制到指定div

问题根源在于你使用@HostListener将拖拽事件绑定到了组件宿主元素上，导致整个组件区域（甚至更大范围）都会响应拖拽操作，而非目标的.dropzone容器。

解决方案步骤： #

1. 移除组件类中所有@HostListener装饰器，保留事件处理函数的核心逻辑
2. 将拖拽事件直接绑定到HTML里的.dropzone元素上

修改后的代码示例： #

component.ts

// 移除@HostListener，保留事件处理逻辑
onDragOver(evt: any) {    
  evt.preventDefault();
  evt.stopPropagation();
  this.coverPhotoOver = true;
}

onDragLeave(evt: any) {    
  evt.preventDefault();
  evt.stopPropagation();
  // 优化：仅当鼠标真正离开dropzone容器时切换状态
  if (evt.target === evt.currentTarget) {
    this.coverPhotoOver = false;
  }
}

ondrop(evt: any) {    
  evt.preventDefault();
  evt.stopPropagation();
  this.coverPhotoOver = false;
  let files = evt.dataTransfer.files;
  if (files.length > 0) {
    this.onCoverPhotoDropped(files[0]);
  }
}

// 以下函数保持原有逻辑不变
onCoverPhotoDropped(selectedCoverPic: any) {
  this.selectedCoverPic = selectedCoverPic;
  this.coverPicName = this.selectedCoverPic.name;

  var ext = this.selectedCoverPic.name.substring(
    this.selectedCoverPic.name.lastIndexOf('.') + 1
  );
  if (
    ext.toLowerCase() == 'jpg' ||
    ext.toLowerCase() == 'jpeg' ||
    ext.toLowerCase() == 'png'
  ) {
    this.coverPicFileType = true;
  } else {
    window.alert(this.alertType);
    this.coverPicFileType = false;
  }

  if (this.coverPicFileType) {
    this.convertFile(this.selectedCoverPic).subscribe((base64) => {
      this.coverPicBase64 = base64;
    });

    this.coverPicOnHold = true;
  }
}

component.html

<div class="col-75">
  <div class="dropzone"
       (dragover)="onDragOver($event)"
       (dragleave)="onDragLeave($event)"
       (drop)="ondrop($event)">
    <p>
      <a (click)="fileDropRef.click()">Upload a file</a>
      or drag and drop
    </p>
    <input
      type="file"
      #fileDropRef
      id="fileDropRef"
      multiple
      (change)="onCoverPhotoSelected($event)"
      style="display: none"
    />
  </div>
</div>

额外说明： #

添加evt.target === evt.currentTarget判断是为了避免鼠标经过dropzone内部子元素时误触发dragleave事件，确保状态切换只在真正离开容器时生效。

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