I am having some trouble creating a full page overlay to recognize dragging + dropping. If a user drags a file from their puter over the page, dropping it anywhere will trigger an upload. However, I'm having trouble getting a full page overlay which is recognized when the file is dropped and doesn't block any hover elements on the page. Here is my current code.
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 that recognizes the drop:
var dropZone = document.getElementById('dropZone');
dropZone.addEventListener('dragover', handleDragOver, false);
dropZone.addEventListener('drop', handleFileSelect, false);
/
I am having some trouble creating a full page overlay to recognize dragging + dropping. If a user drags a file from their puter over the page, dropping it anywhere will trigger an upload. However, I'm having trouble getting a full page overlay which is recognized when the file is dropped and doesn't block any hover elements on the page. Here is my current code.
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 that recognizes the drop:
var dropZone = document.getElementById('dropZone');
dropZone.addEventListener('dragover', handleDragOver, false);
dropZone.addEventListener('drop', handleFileSelect, false);
http://jsfiddle/V37cE/
Share edited Sep 13, 2012 at 4:30 Scott Bartell 2,8503 gold badges26 silver badges36 bronze badges asked Sep 13, 2012 at 2:12 LukasLukas 1,8622 gold badges20 silver badges21 bronze badges 4-
Delete the spaces between surrounding your
=sign in your html. – Daedalus Commented Sep 13, 2012 at 2:14 - Can you clarify what you mean by: "...when the file is dropped and doesn't block any hover elements on the page." – Scott Bartell Commented Sep 13, 2012 at 4:07
- I need a div to recognize when the file is dropped on the page. If the div is set to be above all the other elements, it acts like a shield, so no effects work (hovering and clicking). – Lukas Commented Sep 13, 2012 at 23:51
- It's possible you paste your result because i have this problem? – Kate Commented Feb 25, 2013 at 19:26
3 Answers
Reset to default 4for such overlay, to be displayed only when dragging content, you should handle the dragenter and dragleave event on different elements:
<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>
You then hide/show the overlay in js:
function handleDragEnter(event) {
showMyDropZoneOverlay();
}
function handleDragLeave(event) {
hideMyDropZoneOverlay();
}
function handleDrop(event) {
...
}
This should help. Here's a great tutorial on the HTML5 File Drag & Drop API. And here's the w3 documentation for the API.
I solved the problem by adding the drop zone id to the tag, which covers the full page.