javascript - HTML5 拖放效果允许和 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 中，如果您有一个 dragsource 指示 effectAllowed 是“copy”，而一个 dropzone 表示 dropEffect 是“move”，那么即使您取消事件，您也无法放置在 drop zone 上。我认为 dropEffect 对阅读 ondrop 以了解要做什么很有用，但它在 Chrome 上不可用，dropEffect 不会出现在放置处理程序上，例如尝试读取 dataTransfer.dropEffect 会说 dropEffect 是“无”，即使您将其设置为 dragover。如上所述设置 dropEffect 确实会影响光标的显示方式。

在 Firefox 上，dropEffect 在 dragover 上设置后确实会在 dropzone 上生效，但它不会影响鼠标光标的显示。在 Firefox windows 上按下 ctrl 键会影响鼠标的显示，但不会影响 dropEffect 属性。

规范显示源可以监听 dragend 事件以查看发生了什么。它应该查看此事件中的 dropEffect。 Chrome、Mozilla 和 Safari 的工作方式与您希望的一样，拖放效果出现在 dragend 事件中。在 IE 中，如果允许的效果是一个简单的值，例如“复制”然后任何成功的放置都会导致此值显示为 dragend 上的 dropEffect。如果 effectAllowed 是一个像 copyMove 这样的复合值，并且您试图通过设置 dropEffect 在 dragover 上选择“移动”，那么您就不走运了，它将在 dragend 的源代码中以 dropEffect = "none"的形式出现。你被一个光标和一个 dropEffect 困住了，如果那个效果是一个简单的值，那就是在 dragstart 上设置的 effectAllowed 。有趣的是，当您至少从 IE11 拖入 native 应用程序时(我之前假设)，它似乎确实会出现 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.
  }
}