jQuery 拖放區效果

Question

我試圖這樣做，當您將文件拖入瀏覽器時，會出現一個拖放區，而當您離開瀏覽器（或拖放文件）時，該拖放區效果將消失。

但是，似乎dragover 和dragleave 事件並沒有像我想要的那樣觸發，因為當您將文件拖入瀏覽器時，拖放區將永遠顯示和隱藏。

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。 演示

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