Question

我正在使用一个指令来获取文件，当它被放在HTML元素上时，它在chrome中正常工作但它在IE11中不起作用。 https://jsfiddle.net/DTcHh/38322/ 以下是拖放事件的代码从'@ 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',

我还尝试给min-height赋予了具有拖放指令的元素，但我仍然面临着这个问题。

Chrome中的功能运行顺畅但我在IE11中面临问题

Answer 1

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

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

1 个答案: