HTML/CSS - 完整页面叠加拖放

我在创建整个页面叠加以识别拖放时遇到了一些麻烦。如果用户通过页面从计算机拖动文件，将其放在任何位置都会触发上传。但是，我无法获取整个页面叠加层，当文件被删除时不会识别页面上的任何悬浮元素。这是我目前的代码。HTML/CSS - 完整页面叠加拖放

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/

来源

2012-09-13 Lukas

删除你的html中''符号周围的空格。 – Daedalus

你能澄清你的意思吗：“...当文件被删除，并且不会阻止页面上的任何悬停元素。” –

我需要一个div来识别文件何时被放在页面上。如果div被设置为高于所有其他元素，则它就像一个盾牌，所以没有效果（悬停和点击）。 – Lukas

-1

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

来源

2012-09-14 00:20:30 Lukas

你是否在某处遗失了“身体”？ – cghislai

这应该帮助。这是HTML5文件上的great tutorial拖动&拖放API。这里是API的w3.org documentation。

来源

2012-09-13 04:20:37

这样的叠加，将只显示拖动内容时，你应该处理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-26 20:04:07 cghislai

HTML/CSS - 完整页面叠加拖放

回答

相关问题