时间戳

首页 > 解决方案 > 如何接受 div 的 D&D，但传播点击？

html - 如何接受 div 的 D&D，但传播点击？

问题描述

我有一个全尺寸的 Windowsdiv容器，它对传入的文件拖放事件作出反应。

<div id="drag-overlay">
  <div id="drag-overlay-text">This is shown while drag is active...</div>
</div>

不幸的是，容器不再将点击传播到按钮等底层对象。是否有一个简单的CSS修复，或者我需要在 div 容器上注册一个点击处理程序并手动传播点击/拖动？后者真的不是一个好的解决方案

#drag-overlay {
  position: absolute;
  top: 0;
  z-index: 1;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
}

拖放处理程序的注册：

var holder = document.getElementById('drag-overlay');
holder.ondragover = () => { ...
holder.ondragleave = () => { ...
holder.ondragend = () => { ...
holder.ondrop = (e: DragEvent) => { ...
...

标签： htmlcssnode.js

解决方案

我猜问题是按钮在技术上“在”下方，drag-overlay因为它是绝对定位的，所以不能对它们采取任何行动seen。

由于您没有发布大量代码，因此我将这个工作示例放在一起，该示例显示将按钮放在外部#drag-overlay并绝对定位它的 z-index 高于#drag-overlay.

var btn = document.querySelector("button");

btn.addEventListener("click", function(e) {
  e.preventDefault();
  console.log("click");
});
#drag-overlay {
  position: absolute;
  top: 0;
  z-index: 1;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
}

button {
  position: absolute;
  top: 0;
  z-index: 2;
  left: 0;
  right: 0;
}
<button>TEST</button>
<div id="drag-overlay">
  <div id="drag-overlay-text">This is shown while drag is active...</div>
</div>

推荐阅读