Question

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

我当时想删除单击，以便可以单击它，但是仍然保持悬停事件，以便可以将文件拖放到该事件上。我没有运气解决这个问题，看着其他多个SO问题来寻找答案，但没有一个能如我所愿。我正在寻找纯JS（或NodeJS，因为可以在我的情况下使用），CSS和HTML。除此之外，我对如何做到这一点也很开放。预先感谢！

我尝试使用window.ondrop，window.ondragover等（而不是叠加层）进行此操作，但这似乎被页面上的其他元素打乱了。

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

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

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();
  }

单击<Div> /保持悬停（拖放区）

0 个答案: