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 - 完整頁面疊加拖放

回答

相關問題