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

问题描述

我正在使用一个指令来获取文件，当它被放在HTML元素上时，它在chrome中正常工作但它在IE11中不起作用。

以下是来自'@ angular /的拖放事件
import {Directive，HostListener，Output，EventEmitter}的代码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',

我也尝试给出最小高度对于具有拖放指令的元素，但我仍面临着这个问题。

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

推荐答案

从某些样式中移除指针 - 事件：无对于IE 11而言似乎一切工作

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

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