jQuery drop zone效果

Question

我试图将文件拖入浏览器时会出现一个放置区域,当您离开浏览器(或放下文件)时,放置区域效果将消失.

然而,看起来dragover和dragleave事件并没有按照我想要的方式触发,因为当你将文件拖到浏览器中时,drop zone会一直显示和隐藏.

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

尝试添加

pointer-events:none;

到了落窗类的CSS .DEMO