Question

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

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/

Answer 1

这应该有所帮助。这是HTML5文件中的great tutorial拖动＆amp; Drop API。这是API的w3.org documentation。

Answer 2

对于这样的叠加，只有在拖动内容时才会显示，你应该在不同的元素上处理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) {
  ...
}

Answer 3

我通过在标记中添加放置区域ID来解决问题，该标记覆盖了整个页面。

HTML / CSS - 拖放的整页叠加

3 个答案: