jQuery 拖放区效果

Question

I'm trying to make so when you drag a file into the browser a drop zone will appear and when you leave the browser (or drop the file) that drop zone effect will disappear.

However, it seems that the dragover and dragleave events are not firing as I want, because when you drag a file into the browser that drop zone will keep showing and hiding forever.

JSFiddle http://jsfiddle.net/3vxgtkr0/

HTML:

<div class="drop-window"> <div class="drop-window-content"> <h3>Drop files to upload</h3> </div> </div>

JS:

var dropZone = $(document);
var dropWindow = $('.drop-window');

function onDragOver (e) {
    dropWindow.show();
}

function onDragEnter (e) {
}

function onDragLeave (e) {
    dropWindow.hide();
}

function onDrop (e) {
    e.preventDefault();
}

dropZone.on('dragover', onDragOver);
dropZone.on('dragenter', onDragEnter);
dropZone.on('dragleave', onDragLeave);
dropZone.on('drop', onDrop);

Answer 1

Try Adding

pointer-events:none;

to the css of drop-window class. DEMO

Answer 2

Instead of show/hide the element, you could simply apply a class to it, and the CSS can do the color change / dashed border etc for the same effect, and no extra elements showing up under the mouse to cause glitchyness. Something like this:

var dropZone = $(document);

function onDrop (e) {
    e.preventDefault();
    $(this).removeClass('dragover');
    // do things
}

dropZone.on('dragover', function(){ $(this).addClass('dragover'); });
dropZone.on('dragleave', function(){ $(this).removeClass('dragover'); });
dropZone.on('drop', onDrop);

Then do the rest with CSS classes for .dragover.

.dragover {
   border: 5px dashed green;
   background: lightblue;
}

Or even show/hide a dedicated element more like your original approach, but with only CSS now, something like:

.my-upload-popup {
   position: fixed;
   display: none;
   top: 0; left: 0; right: 0; bottom: 0;
   width: 100%; 
   height: 100%;
   border: 5px dashed green;
   background: lightblue;
   pointer-events: none;
}

.dragover .my-upload-popup {
   display: block; 
   z-index: 10;
}