Drag and Drop event using angular4 is not working in IE11

Question

I am using a directive to get the files when it is dropped on the HTML element, it is working fine in chrome but it is not working in IE11. the following is the code for the drag and drop event import { Directive, HostListener, Output, EventEmitter } from '@angular/core';

@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();

  }
}

intially i was just using like this for the @hostlistener

@HostListener('dragover',

but then i read in some blog which asked me to change it to like this

@HostListener('window:dragover',

I also tried to give min-height to element which has the directive for drag and drop but still i am facing the issue.

the functionality is running smooth in chrome but i am facing issue in IE11

Answer 1

从某些样式的pointer-events: none删除pointer-events: none对于IE 11 pointer-events: none可用，并且一切似乎正常