0

Having some trouble doing a fullscreen dropzone for a website I'm working on. I want the dropzone to be hidden until a user decides to drop a file in. I want the dropzone for the files to be fullscreen, but technically the actual styling of the #dz div is as follows:

position: fixed;
top: 2.5%;
left: 2.5%;
width: 95%;
height: 95%;
border: 2px dashed #9E9E9E;
background-color: rgba(0, 0, 0, 0.5);

I'm using the dragenter and dragleave events for the window, and they work perfectly, until I hover the file, being dragged, over the #dz div. That is when the #dz div disappears.

window.addEventListener("dragenter", function(event) {

    event.preventDefault();

    document.getElementById("dz").className = "dropzoneOver";

});

window.addEventListener("dragleave", function(event) {

    event.preventDefault();

    document.getElementById("dz").className = "dropzoneDefault";

});

Take a look at this gif if you are having trouble understanding: https://i.stack.imgur.com/0ceBF.gif

Any help would be greatly appreciated. Thank you.

EDIT: As per request, I made a simplified JSFiddle that reproduces the problem I am running into: https://jsfiddle.net/UNC00KED/grjhhk4c/

Jacob
  • 439
  • 6
  • 19
  • Please provide a snippet or jsFiddle illustrating the problem with a [Minimal, Complete, and Verifiable example](http://stackoverflow.com/help/mcve). – jcaron Oct 16 '16 at 08:24
  • Done, here's the link: https://jsfiddle.net/UNC00KED/grjhhk4c/ – Jacob Oct 17 '16 at 01:46
  • Your issue is that when over the child element, the browser sends a `dragleave` for the window and a `dragenter` for the child element (and vice-versa on the way out). See http://stackoverflow.com/questions/7110353/html5-dragleave-fired-when-hovering-a-child-element for many solutions to this. – jcaron Oct 17 '16 at 12:09

0 Answers0