javascript - Angular 8拖放dragover Dragleave事件未触发

Question

我正在尝试在 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 上，拖放似乎无法在屏幕之间进行拖放，您需要使用同一屏幕上的文件进行测试。

Answer 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");
}

工作证明: