简体   繁体   English

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

[英]Drag and Drop event using angular4 is not working in IE11

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. 我正在使用指令来将文件放在HTML元素上时获取文件,它在chrome中工作正常,但在IE11中不工作。 在此处输入图片说明 the following is the code for the drag and drop event import { Directive, HostListener, Output, EventEmitter } from '@angular/core'; 以下是从'@ angular / core'导入拖放事件{指令,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();

  }
}

intially i was just using like this for the @hostlistener 最初我只是为@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. 我还尝试将min-height赋予具有拖放指令的元素,但我仍然面临这个问题。

the functionality is running smooth in chrome but i am facing issue in IE11 该功能在chrome中运行平稳,但是我在IE11中面临问题

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

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM