Question

简介：

在2017年3月中旬左右，在将Firefox更新到版本52之后，某些功能 - 删除和粘贴 - 开始正常运行。当它出现在调试中时，事件的属性“dataTransfer”现在被设置为null。

在更新之前，onDrop和onPaste事件都将dataTransfer属性设置为要删除或粘贴的内容。

问题：

如何使用实际浏览器处理删除和粘贴？这些天有必要采取预防措施吗？有没有解释当今限制性行为背后的原因？

互联网上是否有任何示例显示如何使用实际浏览器完成任务？

我没有在firefox版本48之前提出示例，因为至少在该版本之前，整个过程完美无瑕。我不要求jQuery或任何其他库的示例（虽然如果它们作为额外补充而不拒绝那些）。我想用简单的普通原生javascript来举例。

Answer 1

逐步调试时，dataTransfer中的数据似乎丢失了。可能是因为调试涉及的事件。在读取dataTransfer（ev.dataTransfer.getData）之后开始逐步调试，您将看到dataTransfer不再为null。

Answer 2

使用最新版本的FF（当前为73.0.1）时，dataTransfer仅在调试放置事件处理程序（即通过断点或null语句）时才显示为debugger。不调试该功能会使它正常工作。

Answer 3

从这个页面上的代码开始，我遇到了同样的问题：https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API/File_drag_and_drop：dataTransfer 对象是 null 所以我无法访问删除的文件：{{1} }

我已经解决了在调用 event.dataTransfer.items;

之前提取该区域上的已删除文件的问题

这里是我修改的方法：

ev.preventDefault();

Answer 4

我遇到了类似的问题。

我们需要为dataTransfer设置一些属性值。

例如设置 eventObj.dataTransfer.effectAllowed =＆＃34;移动＆＃34;; 以及 eventObj.dataTransfer.setData（＆＃34; text＆＃34;，＆＃ 34;数据＆＃34;）; 在你的dragstart函数中。

  function dragStart(eventObj) {
    eventObj.dataTransfer.setData("text",  "data");
    eventObj.dataTransfer.effectAllowed = "move";
  }

您必须阻止元素的默认操作发生。使用 eventObj.preventDefault（）; 并需要在您的dragover函数中设置 eventObj.dataTransfer.dropEffect =＆＃34; move＆＃34 ;; ，如。

function dragOver(eventObj) {
    eventObj.preventDefault();
    eventObj.dataTransfer.dropEffect = "move";
  }

在drop函数中你也必须停止默认操作，否则firefox会打开你在dataTransfer api中传递的任何数据的新页面。

 function drop(eventObj) {
    vardata = eventObj.dataTransfer.getData("text");
    eventObj.preventDefault();
}

我希望它能在firefox中解决你的问题。

快乐编码

Answer 5

我刚刚用 dragstart 改变了拖动事件

drag.addEventListener('dragstart', e => {
    e.dataTransfer.setData("key", "val");
})