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;

到 drop-window 类的css。 DEMO

Answer 2

除了显示/隐藏元素之外，您还可以简单地向其应用一个类，CSS可以进行颜色更改/虚线边框等以达到相同的效果，并且在鼠标下方不会显示任何其他元素来引起故障。像这样：

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);

然后使用.dragover的CSS类完成其余的工作。

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

或者甚至显示/隐藏一个专用元素，更像您的原始方法，但现在仅使用CSS，就像：

.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;
}