不同浏览器和应用程序之间的 HTML5 拖放

Pet*_*one 6 html drag-and-drop cross-browser

撇开浏览器的怪癖不谈,HTML5 拖放功能可以在同一浏览器的不同窗口之间进行。当我在不同的浏览器中运行 Web 应用程序时,我仍然会收到 Dragover 事件,但数据丢失。

这是dragStart 和dragOver 处理程序。不是很有趣,他们只是实现 MDN 告诉你要做的事情。代码是打字稿。

  public dragStart(e: DragEvent): boolean {
    e.dataTransfer.setData("text/json", JSON.stringify(this.Model));
    return true;
  }

  public dragOver(e: DragEvent): boolean {
    if (e.dataTransfer.items.length) {
      let raw = e.dataTransfer.items[0];
      if (raw && raw.type === "text/json") {
        //highlight drop target
      }
      return false;
    }
    return true;
  }
Run Code Online (Sandbox Code Playgroud)

这段代码在两个 Chrome 窗口中运行,它有效 - 我可以在窗口之间拖动。这段代码在两个 Firefox 窗口中运行,它可以工作。

Chrome 到 Firefox,或 Firefox 到 Chrome,我收到事件但没有数据。

为什么会出现这种情况以及我能做什么?如果它无法工作,那么如果您(Google、Mozilla 等)不打算显示数据,那么从另一个应用程序中触发拖动事件有什么意义呢?

这可能并不是从一个浏览器应用程序复制到另一个浏览器应用程序的世界末日。给定的用户很可能会使用相同的浏览器来访问两者。但我有与桌面应用程序互操作的愿景,但这不是好兆头。


当我将 setData 和 getData 使用的“mime 类型”从text/json(数据是什么)更改为 时text/plain,突然它可以在 Firefox 和 Chrome 之间工作,并且我还可以将节点拖到文本编辑器,毫不奇怪,JSON 会插入其中作为文本。

现在它可以与 Edge 配合使用。Crikey,根据 mdn,你可以制定自己的价值观。他们遗漏了“但如果你想与另一个应用程序进行互操作”

我曾想过使用类型来决定是否允许删除,但对text/plain我的了解没有什么帮助。我可以尝试解析,如果成功,我可以检查一些属性,但这是相当重量级的,并且根据Drag'n'drop dataTransfer.getData empty无论如何它都不起作用。