Javascript drag and drop with partial preventDefault

Gmail treats the downloaded file as a drag and drop file in several ways:

1) Dragging the file to the browser causes dropzone to appear. The cursor displays feedback indicating whether you are in the fall zone or not (the windows use the red cross circle if outside the fall zone). If you enter a window but outside the dropzone, the interception of interception occurs in such a way that the default behavior of the browser is prevented (usually the transition to displaying the dragged file is performed).

The most obvious way to do this is to set the dragover handler to BODY to create a dropzone and prevent Default, but what about changing the cursor? Is there a way to use dataTransfer.effectAllowed = 'none'?

2) Dragging the text from one part of the window to another part does not cause drag-and-drop processing (i.e. dropzone does not appear) - and the warning specified in # 1 does not work.

If I capture the dragover event on BODY (from # 1), then moving text inside the window is prevented. How do they perform both of them at the same time? It seems to be more complicated than it seems at first glance.

UPDATE:

I learned two related things, trying to completely solve this problem:

1) It seems that IE doesn’t even start the drop event handler if dropEffect = 'none' ... so I decided to set it only to none if e.dataTransfer.types exists (which it does in Chrome and FF, but not in IE). The downside is that the cursor does not have a red intersection, but at least I can intercept the fall to prevent navigation. It is best to assume if this was a file crash in IE if e.dataTransfer.getData ('Text') == null. (In my case, I wanted to be able to get drops of files or text, so that I can tell the difference in IE.)

2) , Gmail , . dragleave, dragleave, . , Gmail , dropzone , ​​ , , dropzone ( reset - dragover). , :

function areXYInside(e){  
        var w=e.target.offsetWidth;
        var h=e.target.offsetHeight;
        var x=e.offsetX;
        var y=e.offsetY;
        return !(x<0 || x>=w || y<0 || y>=h);
}

:

$("#page").bind('dragleave', function(e){
        if(this!=e.target) return false;
        if(!areXYInside(e)){
                hideBox();
        }                 
        return false;
});