ondrop 触发时 event.dataTransfer.files 为空？

Question

好吧，我设置了一个元素来接收文件删除事件，但是当我查看

event.dataTransfer

时，它是空白的。我还没有抽出时间来学习拖放式 HTML5 API，对它仍然有点模糊。我正在我的网站上进行这项工作。如果您不介意浏览我的代码并看看发生了什么，我们将不胜感激。正在记录整个

event

对象。

Answer 1

工作正常，只是控制台的一个错误。

function onDrop(event) {
    event.preventDefault();
    console.log(event.dataTransfer.files[0]);
}

Answer 2

另请看一下此错误/行为：HTML5 放置事件在处理拖拽之前不起作用

基本上，您需要处理悬停/拖动并指定 dropEffect

Answer 3

所以，我对这种行为真的很恼火。所以我想出了一个小循环，基本上克隆了整个对象：

  const seen = new WeakSet()
  const parseObj = (obj) => {
    const newObj = {}

    for (const key in obj) {
      if (typeof obj[key] === 'function') {
        continue
      }
      if (obj[key] === null) {
        newObj[key] = null
        continue
      }
      if (typeof obj[key] === 'object') {
        if (seen.has(obj[key])) {
          continue
        }

        seen.add(obj[key])
        newObj[key] = parseObj(obj[key])
      } else {
        newObj[key] = obj[key]
      }
    }

    return newObj
  }

  console.log(parseObj(e))

它适用于我的用例

Answer 4

我在以下位置找到了我需要的东西：

e.originalEvent.dataTransfer