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