使用 angular4 的拖放事件在 IE11 中不起作用

Posted 2023-02-19

【中文标题】使用 angular4 的拖放事件在 IE11 中不起作用

【英文标题】：Drag and Drop event using angular4 is not working in IE11

【发布时间】：2018-03-25 14:47:44

【问题描述】：

我正在使用指令在将文件放在 html 元素上时获取文件，它在 chrome 中运行良好，但在 IE11 中无法运行。 以下是拖放事件的代码 从 '@angular/core' 导入 Directive, HostListener, Output, EventEmitter ;

@Directive(
  selector: '[appDragDrop]'
)
export class DragDropDirective 

  constructor()  
  @Output()
  FileDragEvent: EventEmitter<File> = new EventEmitter<File>();

  @HostListener('window:drop', ['$event']) public onDrop(event) 

    event.preventDefault();
    event.stopPropagation();
    if (event.dataTransfer.items[0].type != 'application/vnd.ms-excel') 
      return false;
    
    let files = event.dataTransfer.files;
    this.FileDragEvent.emit(files);
  
  @HostListener('window:dragover', ['$event']) public onDragOver(evt) 
    evt.preventDefault();
    evt.stopPropagation();

  

  @HostListener('window:dragleave', ['$event']) public onDragLeave(evt) 
    evt.preventDefault();
    evt.stopPropagation();

  

最初我只是将这样用于@hostlistener

@HostListener('dragover',

但后来我读到一些博客要求我将其更改为这样

@HostListener('window:dragover',

我还尝试为具有拖放指令的元素提供最小高度，但我仍然面临这个问题。

该功能在 chrome 中运行流畅，但我在 IE11 中遇到问题

【问题讨论】：

到目前为止这个问题有什么更新吗？？

【参考方案1】：

从 IE 11 的某些样式 pointer-events: none 中删除，一切似乎都正常