1

我在创建整页覆盖以识别拖放时遇到了一些麻烦。如果用户将文件从他们的计算机拖到页面上，将其放在任何地方都会触发上传。但是，我无法获得一个完整的页面覆盖，该覆盖在文件被删除并且不会阻止页面上的任何悬停元素时被识别。这是我当前的代码。

HTML：

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

CSS：

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

识别drop的JS：

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

http://jsfiddle.net/V37cE/

4

3 回答 3

0

对于此类叠加，仅在拖动内容时显示，您应该处理不同元素上的 dragenter 和 dragleave 事件：

<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) {
  ...
}
于 2016-05-26T20:04:07.267 回答
-1

这应该会有所帮助。这是关于 HTML5 文件拖放 API的精彩教程。这是 API 的w3.org 文档。

于 2012-09-13T04:20:37.973 回答
-1

我通过将放置区 id 添加到覆盖整个页面的标签来解决了这个问题。

于 2012-09-14T00:20:30.007 回答