防止浏览器在 Angular 中加载拖放文件

Question

我有一个页面（在 Angular 4 中），其中有一个拖放组件（ng2-filedrop）。拖放工作正常，但是当我拖动一个文件并将其拖放到除拖放组件之外的页面时，它在该页面中打开文件。

有什么方法可以禁用在其他地方放置文件，或者至少可以在单独的浏览器选项卡中打开文件？

Answer 1

您可以通过覆盖调用以防止浏览器的默认拖放行为的全局对象的dragover和drop事件来做到这一点。windowpreventDefault()

将以下代码片段添加到ngOnInit()app.component.ts 的方法中：

ngOnInit(): void {
  window.addEventListener("dragover", e => {
    e && e.preventDefault();
  }, false);
  window.addEventListener("drop", e => {
    e && e.preventDefault();
  }, false);
}

这不是我自己的答案，您可以在防止浏览器加载拖放文件中 看到原始答案和更多讨论

Answer 2

以下内容与Hoang Duc Nguyen 的答案
非常相似 ，显示dropEffect了悬停上的红色十字光标。

ngOnInit(): void {
        window.addEventListener("dragover", e => {
            e && e.preventDefault();
            e.dataTransfer.effectAllowed = "none";
            e.dataTransfer.dropEffect = "none";
        }, false);
        window.addEventListener("drop", e => {
            e && e.preventDefault();
            e.dataTransfer.effectAllowed = "none";
            e.dataTransfer.dropEffect = "none";
        }, false);
    }

在组件内使用以下内容。
如果您想区分从用户删除的文件或页面内的删除事件，您可以检查类型。

@HostListener("dragover", ["$event"])
  onDragOver(ev: DragEvent) {
    if (ev.dataTransfer.types.includes("Files"))
      return;
    ev.preventDefault();
    ev.stopPropagation();
    ...
  }