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

时间:2017-10-27 10:48:08

标签: html5 drag-and-drop cross-browser

除了浏览器怪癖之外,HTML5拖放在同一浏览器的不同窗口之间工作。当我在不同的浏览器中运行Web应用程序时,我仍然会收到dragover事件,但数据丢失了。

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

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

此代码在两个Chrome窗口中运行,它可以工作 - 我可以在窗口之间拖动。这个代码运行在两个Firefox窗口中,它的工作原理。

Chrome到Firefox,或Firefox到Chrome,我收到了活动但没有数据。

为什么以及我该怎么办?如果无法使其工作,那么如果您(Google,Mozilla等)没有展示数据,那么从另一个应用中触发拖动事件的重点是什么呢?

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

当我改变" mime类型"与text/json的setData和getData一起使用(这是数据的内容)到text/plain,突然它在Firefox和Chrome之间起作用,我也可以将节点拖到文本编辑器,不出所料JSON作为文本插入。

现在它适用于Edge。 Crikey,根据mdn你可以弥补自己的价值观。他们遗漏了#34;但如果你想与另一个应用程序互操作,那就不行了#34;

我曾考虑使用该类型来决定是否允许删除,而text/plain几乎无法帮助我做到这一点。我可以尝试一个解析,如果成功,我可以检查一些属性,但这是相当重量级的,根据Drag'n'drop dataTransfer.getData empty它无论如何都不会工作。

0 个答案:

没有答案