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();
}
}
最初我只是像这样使用 @hostlistener
@HostListener('dragover',
但后来我在一些博客中读到要求我将其更改为这样
@HostListener('window:dragover',
我还尝试为具有拖放指令的元素提供最小高度,但我仍然面临这个问题。
该功能在 Chrome 中运行顺利,但我在 IE11 中遇到问题