On this application, the user can drag and drop a file on the specified location. Let say here:
<div id="dropZone" style="width: 200px; height: 100px;"></div>
However, we noticed that no matter where the file is drop, the webpage will process it. Here is an example taken online https://jsfiddle.net/oL2akhtz/. There is a place to drop the file, but no matter where you leave it, it will stay. How to know if the user is droping the file in the right place? Or how do you disable the cursor if the user is not droping the file where it should be?
it actually only works on the dropzone because it has full width and height.
and the drag is set to window, when a user drags over the window, the div will be visible but will not receive any files
to fix it
div#dropZone {
background: gray;
position: fixed;
top: 0;
left: 0;
width: 30%;
height: 30%;
z-index: 999;
opacity: 0.6;
visibility: hidden;
}