Клик через <Div>/ Поддерживать парение (Drag & Drop Zone) - PullRequest
Новая
       100

Клик через <Div>/ Поддерживать парение (Drag & Drop Zone)

0 голосов
/ 09 октября 2019

Я хочу, чтобы пользователь мог перетащить файл на страницу и вызвать событие. Прямо сейчас у меня есть оверлей, который находится сверху страницы с z-index: 100, и он работает, чтобы перетаскивать файлы на него. Моя проблема в том, что он перекрывает все остальные элементы на странице (включая элементы, которые покрывают весь фон), что означает, что я не могу ничего щелкнуть ниже;текст, кнопки, воспроизведение видео, все нижеприведенное не может взаимодействовать.

Я думал об удалении щелчка, чтобы его можно было щелкнуть, но при этом все еще оставалось событие зависания, чтобы на него можно было сбрасывать файлы,Мне не повезло с этим разобраться, я посмотрел на несколько других SO вопросов, чтобы найти ответы, но ни один из них не сработал так, как я хочу. Я ищу чистый JS (или NodeJS, так как это можно использовать в моем случае), CSS и HTML. Кроме того, я открыт для предложений о том, как это сделать. Заранее спасибо!

Я попытался сделать это, используя window.ondrop, window.ondragover и т. Д. Вместо наложения, но, похоже, это нарушено другими элементами на странице.

Iтакже пытался добавить указатель-события: нет;и выбор пользователя: нет;в комбинированном режиме и в одиночку.

Помещение наложения на слой ниже всех элементов делает его неуправляемым по той же причине, что и фоновые элементы становятся неуправляемыми, когда наложение находится сверху.

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