整個頁面覆蓋拖放jQuery

我試圖添加一個完整的頁面覆蓋當有人用文件進入窗口。這是行得通的，但是當我添加覆蓋圖時，它會立即觸發'dragleave'事件，因爲覆蓋圖會阻止拖動。這導致閃爍效應。整個頁面覆蓋拖放jQuery

瀏覽器兼容性：
- Chrome和Safari似乎有這個問題
- 當你把光標仍當移動時Firefox有這個問題：沒有問題。 - IE9似乎工作

我想成爲一樣的imgur.com。如果你將一個文件拖到他們的頁面上，它會顯示一個沒有閃爍的重疊或諸如此類的東西。

首先解決

$(window).bind('dragover', dragover); 
$(window).bind('drop', drop); 
$(window).bind('dragleave', dragleave);

Full example on jsFiddle

解決方法二

我也試圖在 'dragleave' 事件設置爲 '.overlay' 類，你可以在這裏看到：

$('.overlay').bind('dragleave', dragleave);

Full example on jsFiddle

但是，如果您將鼠標懸停在div的段落上，它也會發送'dragleave'事件。

有人知道如何防止這種情況發生嗎？或者只有當你離開瀏覽器窗口時，如何才能'dragleave'？

謝謝！

來源

2013-02-28 tdhulster

在IE9和Firefox我可以」看不到閃爍的效果！你使用哪個瀏覽器？ – 2013-02-28 12:39:30

我使用Chrome和Safari :)我會把它放在原來的帖子;）謝謝 – tdhulster 2013-02-28 12:46:27

因此，在IE9和Firefox的第二個或第一個解決方案工作正常？ – tdhulster 2013-02-28 12:47:19

在Hide上添加超時有助於防止閃爍！

function dragover(event) { 
    clearTimeout(tid); 
    event.stopPropagation(); 
    event.preventDefault(); 
    $('.overlay').show(); 
} 

function dragleave(event) { 
    tid = setTimeout(function(){ 
     event.stopPropagation(); 
     $('.overlay').hide(); 
    }, 300); 
}

我編輯你的小提琴http://jsfiddle.net/yApUZ/

來源

2013-02-28 13:12:45

這個作品相當不錯！剩下的唯一的事情是：離開瀏覽器窗口時有延遲：覆蓋層會持續300毫秒:)我可以檢查鼠標離開瀏覽器的時間嗎？ – tdhulster 2013-02-28 13:24:31

感謝您的幫助！對於那些稍後有同樣問題的人，我再次發佈了完整的答案！ – tdhulster 2013-02-28 13:46:18

而不是複製Nikolaj的答案來添加你的問題的一部分，並接受它作爲你提供的答案，你可以剛剛編輯他的。 – topless 2013-07-01 14:29:07

感謝尼古拉我來到了正確答案：

function dragover(event) { 
clearTimeout(tid); 
event.stopPropagation(); 
event.preventDefault(); 
$('.overlay').show();} 

function dragleave(event) { 
tid = setTimeout(function(){ 
event.stopPropagation(); 
$('.overlay').hide(); 
}, 0);}

設置超時爲300，讓瀏覽器窗口時，設置爲當保持延遲0：延遲和問題沒有了。

我還使用了窗口上的綁定，因爲在Firefox中，.overlay類的綁定似乎每次都不起作用。

$(window).bind('dragover', dragover); 
$(window).bind('drop', drop); 
$(window).bind('dragleave', dragleave);

"Here is the full working example in Fiddle"

來源

2013-02-28 13:45:28 tdhulster

300毫秒延遲只是一個很好的猜測什麼工作正常;-)不錯，0毫秒仍然解決了問題！ – 2013-02-28 13:48:07

是的，感謝您的幫助！ – tdhulster 2013-02-28 13:57:54

我碰到我optinion一個更好的解決方案來了，沒有必要使用超時，我往往不喜歡。

如果您設置的覆蓋有CSS屬性

pointer-events:none

顯示出來時，它不會影響窗口拖拽事件，你可以達到同樣的效果

來源

2014-01-23 16:17:33

完美無瑕地工作，這應該是答案！ – 2016-03-10 18:03:17

整個頁面覆蓋拖放jQuery

回答

相關問題