CODEWITHSUNDEEP
javascripthtmlcssdrag-and-drop
Lukas
Lukas

Reputation: 1862

HTML/CSS - Full Page Overlay for Drag and Drop

I am having some trouble creating a full page overlay to recognize dragging + dropping. If a user drags a file from their computer 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.net/V37cE/

Upvotes: 4

Views: 7784

Answers (3)

cghislai
cghislai

Reputation: 1801

for 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) {
  ...
}

Upvotes: 4

Lukas
Lukas

Reputation: 1862

I solved the problem by adding the drop zone id to the tag, which covers the full page.

Upvotes: -1

Scott Bartell
Scott Bartell

Reputation: 2840

This should help. Here's a great tutorial on the HTML5 File Drag & Drop API. And here's the w3.org documentation for the API.

Upvotes: -1

Related Questions