HTML/CSS-用于拖放的全页面覆盖

HTML/CSS - Full Page Overlay for Drag and Drop

本文关键字：覆盖 拖放 CSS- 用于 HTML      更新时间：2023-09-26

我在创建一个完整的页面覆盖以识别拖放时遇到了一些问题。如果用户将文件从计算机拖到页面上，将其放在任何位置都会触发上传。然而，我很难获得完整的页面覆盖，当文件被删除时，它可以被识别，并且不会阻止页面上的任何悬停元素。这是我当前的代码。

HTML:

<div id = 'dropZone'></div>

CSS：

#dropZone
{
    background: gray;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 100;
    opacity: .8;
}

识别跌落的JS：

var dropZone = document.getElementById('dropZone');
dropZone.addEventListener('dragover', handleDragOver, false);
dropZone.addEventListener('drop', handleFileSelect, false);

http://jsfiddle.net/V37cE/

对于这样的覆盖，只有在拖动内容时才会显示，您应该在不同的元素上处理draginter和draglive事件：

<body>
 <div>...</div>
 <div id="myDropZone" ondragenter="handleDragEnter" style="z-index: 1">
   <div id="myDropOverlay" ondragleave="handleDragLeave" onDrop="handleDrop" hidden style="z-index: 2">
     Drop your file here
   </div>
   <div>
     content covered by the drop zone overlay while dragging
   </div>
 </div>
</body>

然后在js:中隐藏/显示覆盖

function handleDragEnter(event) {
  showMyDropZoneOverlay();
}
function handleDragLeave(event) {
  hideMyDropZoneOverlay();
}
function handleDrop(event) {
  ...
}

这应该会有所帮助。这里有一个伟大的教程HTML5文件拖动&删除API。这是API的w3.org文档。

我通过将drop zone id添加到标签中解决了这个问题，该标签覆盖了整个页面。

相关文章：