HTML5 拖放效果Allowed 和 dropEffect

Question

这两个属性之间的关系似乎是一些混乱的根源。基于阅读the MDN site 和MSDN 我以为我已经想通了，但现在我不确定......

我认为当一个元素被拖动时，您可以指定允许发生的事情（即它可以被移动、复制、链接到 - effectAllowed 常量之一）。这是effectAllowed 属性。

不同的放置目标做不同的事情，因此当您拖动另一个元素时，它可以控制放置时发生的“效果”，这就是“dropEffect”属性。所以我设置了一个简单的例子来验证这个理论。

JSFiddle

$("[draggable='true']").on("dragstart", function(e) {
    var dt =  e.originalEvent.dataTransfer;
    dt.effectAllowed = "copyMove";
    dt.setData("text/plain", "Foo");
});

$("#dropZoneCopy").on("dragover", function(e) {
    var dt =  e.originalEvent.dataTransfer;
    dt.dropEffect = "copy";
    e.preventDefault();
});

$("#dropZoneMove").on("dragover", function(e) {
    var dt =  e.originalEvent.dataTransfer;
    dt.dropEffect = "move";
    e.preventDefault();
});

我有一个用户可以拖动的框 - 允许的效果是“copyMove”。我有一个将dropEffect 设置为复制的框，然后将dropEffect 设置为移动。我期望的是，当用户拖动“复制框”时，光标会改变以指示复制将发生，当我拖动“移动框”时，光标会改变以指示移动......

只有 Chrome 的行为符合我的预期。这是因为其他浏览器错误还是因为我不了解规范。正确吗？

更新 更多信息来自摆弄这个。

在 Firefox 和 Chrome 中，如果您有一个指示 effectAllowed 为“复制”的拖动源和一个指示 dropEffect 为“移动”的放置区，那么即使您取消事件，您也无法在放置区放置。我认为 dropEffect 对阅读 ondrop 以查看要做什么很有用，但它在 Chrome 上不可用，dropEffect 不会出现在 drop 处理程序上，例如尝试读取 dataTransfer.dropEffect 会说 dropEffect 是“none”，即使您将它设置为 dragover。如上所述设置 dropEffect 确实会影响光标的显示方式。

在 Firefox 上，dropEffect 确实会在设置为 dragover 后出现在 dropzone 上，但它确实不影响鼠标光标的显示。在 Firefox 窗口上按 ctrl 键会影响鼠标的显示，但不会影响 dropEffect 属性。

规范显示源可以侦听 dragend 事件以查看发生了什么。它应该查看此事件中的 dropEffect。 Chrome、Mozilla 和 Safari 在这里可以正常工作，拖放效果出现在 dragend 事件中。在 IE 中，如果允许的效果是一个简单的值，例如“复制”然后任何成功的放置都会导致该值在拖动时显示为 dropEffect。如果 effectAllowed 是像 copyMove 这样的复合值，并且您尝试通过设置 dropEffect 在拖动时选择“移动”，那么您就不走运了，这将在拖动端的源中以 dropEffect =“none”的形式出现。你被一个光标和一个 dropEffect 卡住了，如果这个效果是一个简单的值，那就是在 dragstart 上设置的 effectAllowed。有趣的是，至少当您从 IE11 拖入本机应用程序时，它似乎确实会出现 dropEffect（我之前假设过）。

其他说明

在 Mac 上的 Safari 上 - effectAllowed 不能以编程方式设置，因此任何设置的 dropEffect 都是有效的。当您按下 cmd 键时 effectAllowed 变为“移动”，当您按下 alt 键时 effectAllowed 变为“复制”。此后，如果 dropEffect 不是这些 effectAlloweds 之一，则它会按您希望的方式工作。浏览器不允许放置。

更多信息 我一直在花一些空闲时间研究 HTML5 拖放库，我在文档中为它写了很多关于这个和其他问题的内容，如果你有兴趣，请看一下 the project

Answer 1

看看https://web.dev/drag-and-drop/

function handleDrop(e) {
  e.stopPropagation(); // Stops some browsers from redirecting.
  e.preventDefault();

  var files = e.dataTransfer.files;
  for (var i = 0, f; f = files[i]; i++) {
    // Read the File objects in this FileList.
  }
}