1

我希望用户能够将文件拖放到页面中并触发事件。现在我有一个覆盖在页面顶部的 z-index: 100 并且它可以将文件拖放到上面。我的问题是它与页面上的所有其他元素重叠（包括覆盖整个背景的元素），这意味着我无法单击下面的任何内容；文字、按钮、视频播放，下面的所有内容都无法交互。

我正在考虑删除点击，以便可以点击它，但仍然保留悬停事件，以便可以将文件放在上面。我没有运气弄清楚这一点，查看了其他多个 SO 问题以寻求答案，但没有一个像我想要的那样起作用。我正在寻找纯 JS（或 NodeJS，因为在我的情况下可以使用）、CSS 和 HTML。除此之外，我对如何完成这项工作的建议持开放态度。提前致谢！

我尝试使用 window.ondrop、window.ondragover 等而不是覆盖来执行此操作，但这似乎被页面上的其他元素打乱了。

我也尝试添加指针事件：无；和用户选择：无；组合和单独。

将覆盖层放在所有元素下方的图层上使其无法交互，原因与当覆盖层位于顶部时背景元素变得无法交互一样。

JSFiddle：https ://jsfiddle.net/apLuykz3/1/ 我需要下面的按钮以及任何其他元素都是可点击的，但是在将文件拖到窗口上时保持悬停事件。

HTML

<div id="dropOverlay"></div>

CSS

div#dropOverlay{
  position: fixed;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  z-index: 100;
}

div#dropOverlay[show="true"]{
  background: rgba(0, 0, 0, 0.5);
}

JavaScript

// Drop events
  document.querySelector("#dropOverlay").ondrop = function (e) {
    // e.preventDefault();
    var files = e.dataTransfer.files;
    for (var i = 0; i < files.length; i++) {
      console.log(files[i]);
    }
    this.removeAttribute("show");
  }

  document.querySelector("#dropOverlay").ondragenter = function (e) {
    e.stopPropagation();
    e.preventDefault();
    this.setAttribute("show", "true");
  }

  document.querySelector("#dropOverlay").ondragleave = function (e) {
    e.stopPropagation();
    e.preventDefault();
    this.removeAttribute("show");
  }

  document.querySelector("#dropOverlay").ondragover = function (e) {
    e.preventDefault();
  }
4

0 回答 0