使用 angular4 的拖放事件在 IE11 中不起作用 [英] Drag and Drop event using angular4 is not working in IE11

问题描述

我正在使用指令在将文件放在 HTML 元素上时获取文件，它在 chrome 中运行良好，但在 IE11 中不起作用.以下是拖放事件的代码import { Directive, HostListener, Output, EventEmitter } from '@angular/core';

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

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',

我还尝试为具有拖放指令的元素提供 min-height，但我仍然面临这个问题.

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

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

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

推荐答案

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

removed from some styles pointer-events: none for IE 11 and everything seems to work

这篇关于使用 angular4 的拖放事件在 IE11 中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！