Question

我有以下设置：

一个按钮，上面写着：“在此处上传您的文件”，这只是一个简单的<input type="file" multiple>
当用户进入查找器并想要删除文件时，我想显示一个更大的区域，他们可以放下文件，因为按钮不是很大。只有当用户将鼠标悬停在“较大的输入”并且持有文件时，才能使用此功能。

如何实施＃2？

我在这个网站上看到了一个样式：http://www.dropzonejs.com/当用户'在上传区域上方悬停一个文件'时，却无法弄清楚他们是如何做到的。

Answer 1

将函数绑定到要监听的事件类型（dragover，dragenter，dragstart，dragend和dragleave），并确保此函数至少有一个参数（事件）。然后使用event.dataTransfer。如果没有关于如何实现它的更多细节，给出示例代码很难。

参考：https://developer.mozilla.org/en-US/docs/Web/API/DataTransfer

FYI您提到的dropzonejs使用：

return function(e) {
  var efct;
  try {
    efct = e.dataTransfer.effectAllowed;
  } catch (_error) {}
  e.dataTransfer.dropEffect = 'move' === efct || 'linkMove' === efct ? 'move' : 'copy';
  noPropagation(e);
  return _this.emit("dragover", e);
}

上面的代码被绑定到＆＃34; dragover＆＃34;

Answer 2

您可以使用Javascript进行文件删除样式更改：

选中 Example ：

// file drag hover
function FileDragHover(e) {
    e.stopPropagation();
    e.preventDefault();
    e.target.className = (e.type == "dragover" ? "hover" : "");
}

只有悬停时的显示元素和用户正在抓取文件

2 个答案: