javascript - 确定从 dragenter 和 dragover 事件中拖动的内容

Question

我正在尝试使用 HTML5 可拖动 API(虽然我知道它 has its problems )。到目前为止，我遇到的唯一问题是我想不出一种方法来确定在 dragover 或 dragenter 事件触发时被拖动的内容:

el.addEventListener('dragenter', function(e) {
  // what is the draggable element?
});

我意识到我可以假设它是触发 dragstart 事件的最后一个元素，但是......多点触控。我还尝试使用 dragstart 中的 e.dataTransfer.setData 来附加一个唯一标识符，但显然数据是 inaccessible来自 dragover/dragenter:

This data will only be available once a drop occurs during the drop event.

那么，有什么想法吗？

更新:截至撰写本文时，HTML5 拖放功能似乎并未在任何主流移动浏览器中实现，这使得多点触控在实践中没有实际意义。但是，我想要一个保证适用于 the spec 的任何实现的解决方案。 ，这似乎并不排除同时拖动多个元素。

我已经发布了 a working solution下面，但这是一个丑陋的黑客。我仍然希望得到更好的答案。

Answer 1

我想在这里添加一个非常明确的答案，以便每个路过这里的人都能一目了然。在其他答案中已经多次说过，但在这里，尽可能清楚:

dragover 无权查看拖动事件中的数据。

此信息仅在 DRAG_START 和 DRAG_END(删除)期间可用。

问题是它根本不明显而且令人抓狂，直到你碰巧对规范或像这里这样的地方进行了足够深入的阅读。

解决方法:

作为一种可能的解决方法，我向 DataTransfer 对象添加了特殊键并对其进行了测试。例如，为了提高效率，我想在拖动开始时查找一些“放置目标”规则，而不是每次发生“拖动”时查找。为此，我将标识每个规则的键添加到 dataTransfer 对象上，并使用“包含”测试它们。

ev.originalEvent.dataTransfer.types.includes("allow_drop_in_non_folders")

诸如此类。需要明确的是，“包含”并不是 Elixir ，它本身可能成为性能问题。请注意了解您的使用情况和场景。