无法弄清楚如何使用全屏拖放dropzone

Question

在为我正在处理的网站上执行全屏dropzone时遇到一些麻烦。我希望隐藏dropzone直到用户决定放入文件。我希望文件的dropzone是全屏的，但从技术上讲，＃dz div的实际样式如下：

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

我正在使用窗帘的dragenter和dragleave事件，它们完美地工作，直到我将文件拖放到#dz div上。那是#dz div消失的时候。

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

    event.preventDefault();

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

});

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

    event.preventDefault();

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

});

如果您无法理解，请查看此gif：http://i.imgur.com/48PPapC.gif

非常感谢任何帮助。谢谢。

编辑：根据请求，我制作了一个简化的JSFiddle，它重现了我遇到的问题：https://jsfiddle.net/UNC00KED/grjhhk4c/