While writing web apps that took file input, I wanted to use drag 'n' drop, but I didn't want just a small dropzone on the page. I thought it would be more convenient if you could drop anywhere on the page. Luckily, the window.ondrop event fires anywhere on the page, but I wanted some fancy effect to show the user visually that drag/drop was possible.
To do that, all that was needed was detect when a file was dragged into the window, and when it was dragged out, to trigger an effect that showed the user that the app was drag-enabled. Turns out that drag events are not that convenient. I assumed that window.ondragenter
would trigger only once, when the user entered the page. Then when you left the window, it'd trigger window.ondragleave
. Wrong. It's constantly firing as the mouse moves over child elements in the page.
I looked at what properties were available in the event object, trying to find anything that could isolate what I needed, but nothing worked. The furtherest I got was being able to change the background color of body
. And only if there was nothing else on the page.
Tons of file upload sites got it right. Imgur and WeTransfer for example. Their sites were all spahetti-coded and compressed to the point of unreadability, and I couldn't find anything on the subject by googling.
So how can this be done?