Question

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

有没有办法禁止将文件丢弃到其他位置，或者是否可以在单独的浏览器选项卡中至少打开文件？

Answer 1

您可以通过覆盖调用dragover的全局drop对象的window和preventDefault()事件来阻止浏览器的默认拖放行为。

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

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

这不是我自己的答案，你可以在Prevent browser from loading a drag-and-dropped file

看到原始答案和更多讨论

Answer 2

下面的真的很像Hoang Duc Nguyen's Answer
import org.apache.spark.sql.functions.lit def extractFldrFromPath(path: String): String = ??? def readPath(path: String): DataFrame = { val fldr = extractFldrFromPath(path) val df = spark.read.format("parquet").load(path) df.withColumn("fldr", lit(fldr)) } paths.map(readPath).reduce(_ union _) 显示悬停时的红色十字光标。

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);
    }

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

2 个答案: