Angular 8拖放dragover dragleave事件未触发答案

【问题标题】：Angular 8 drag drop dragover dragleave events not firingAngular 8拖放dragover dragleave事件未触发
【发布时间】：2020-06-19 06:27:35
【问题描述】：

我正在尝试在 Angular 8 中实现拖放文件上传，深受this article 和this one 的启发。

我无法触发任何拖动事件。我检查了 DragDropDirective 是通过在同一指令中使用 mouseenter 方法导入的，该指令正确启动，我还看到我添加的样式已正确应用。

我整天都在为此苦苦挣扎，我错过了什么？

编辑：这适用于文件资源管理器中的文件，但不适用于桌面上的文件。使用 Ubuntu 19。

// component.html
<section appDragDrop class="panel" id="dropzone-wrapper" (onFileDropped)="uploadFile($event)">
    <input type="file" #fileInput (change)="uploadFile($event.target.files)" accept=".json" hidden>
    <label for="dropzone">
        <span>
            drag and drop here.
        </span>
    </label>
</section>

import { Directive, Output, Input, EventEmitter, HostBinding, HostListener, ElementRef } from '@angular/core';

@Directive({
  selector: '[appDragDrop]'
})
export class DragDropDirective {
  el: ElementRef
  constructor(el: ElementRef) {
    el.nativeElement.style.backgroundColor = 'yellow';
  }

  // Working fine
  @HostListener('mouseenter') onMouseEnter() {
    console.log('mouse entering')
  }
  
  // Working fine
  @HostListener('mouseleave') onMouseLeave() {
    console.log('mouse leaving')
  }

  // --- Not working ---
  @HostListener('dragover', ['$event']) onDragOver(evt) {
    console.log('A')
  }

  // --- Not working ---
  @HostListener('dragleave', ['$event']) public onDragLeave(evt) {
    console.log('B')
  }

  // --- Not working ---
  @HostListener('drop', ['$event']) public ondrop(evt) {
    console.log('C')
  }
}

注意

在 linux 上拖放似乎无法在屏幕之间进行拖放，您需要使用同一屏幕上的文件进行测试。

【问题讨论】：

标签： javascript angular typescript angular8

【解决方案1】：

您提供的代码可以正常工作：https://stackblitz.com/edit/angular-ayht81?embed=1&file=src/app/drag-drop.directive.ts

掉落事件

除非您阻止默认行为，否则 Drop 不会触发：

@HostListener("dragover", ["$event"]) onDragOver(evt) {
  evt.preventDefault()
  console.log("A");
}

工作证明：

【讨论】：

我确实尝试过使用桌面上的文件，这应该只适用于文件资源管理器中的文件吗？感谢您的帮助
不幸的是，可以确认它不能从桌面工作。所以这需要一些研究。

【解决方案2】：

如果你想使用拖放事件来上传文件，你应该使用window:dragenter 事件监听器。此事件开始将文件拖入窗口，当拖动事件开始时，dragover、dragleave 和 drop 也将起作用。
示例：

// missing listener which detects that something was dragged into window area
@HostListener('window:dragenter', ['$event'])
onWindowDragEnter(event: any): void {
  event.preventDefault();
  event.stopPropagation();
}

@HostListener('dragover', ['$event'])
onDragOver(event: any): void {
  event.preventDefault();
  event.stopPropagation();
  // ...
}

@HostListener('dragleave', ['$event'])
public onDragLeave(event: any): void {
  event.preventDefault();
  event.stopPropagation();
  // ...
}

@HostListener('drop', ['$event'])
public onDrop(event: any): void {
  event.preventDefault();
  event.stopPropagation();
  // ...
}

但解决方案未在 Ubuntu 上测试

【讨论】：