0

I have been trying to check when a file is being dragged on to my website using javascript. I have tried putting a "hitbox" div covering the whole site:

<div id="Drag-File-Hitbox" ondragover="BGDragFileOver()">
</div>
<style>
#Drag-File-Hitbox {
    position: absolute;
    width: 100%;
    height:100%;
    margin: 0;
    padding:0;

    z-index: 999999999;
}
</style>

Whenever I drag a file to my website it does what I want but I cant click stuff in the background such as my navigation bar. I have also tried putting the ondragover event on the body tag but that didn't work either.

Heine
  • 30
  • 5
  • If you mean that you want to be able to drop the file into anywhere on your page, check this question: [How do I detect a HTML5 drag event entering and leaving the window, like Gmail does?](https://stackoverflow.com/questions/3144881/how-do-i-detect-a-html5-drag-event-entering-and-leaving-the-window-like-gmail-d) – cbr Jan 12 '18 at 16:33
  • https://stackoverflow.com/questions/8414154/html5-drop-event-doesnt-work-unless-dragover-is-handled – Mark Schultheiss Jan 12 '18 at 18:26

1 Answers1

0

I fixed it by using jQuery instead, here is the code below that worked for others who might stumbleupon the same issue.

$(document).ready(function(){
   $(window).on('dragenter', function(){
      do stuff
   });
});
Heine
  • 30
  • 5