4

誰かがファイルを持ってウィンドウに入ったときに、フル ページ オーバーレイを追加しようとしています。'dragleave'これは機能していますが、オーバーレイを追加すると、オーバーレイがドラッグをブロックするため、すぐにイベントが発生します。これにより、ちらつき効果が生じます。

ブラウザの互換性:
- Chrome と Safari にはこの問題があるようです
- Firefox には、カーソルを静止させて動かしているときにこの問題があります: 問題ありません。-IE9は動作しているようです

imgur.comと同じになりたい。ファイルをページにドラッグすると、ちらつきなどのないオーバーレイが表示されます。

最初の解決策

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

jsFiddle の完全な例

2 番目の解決策

ここでわかるように、「dragleave」イベントを「.overlay」クラスに設定しようとしました。

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

jsFiddle の完全な例

ただし、div 内の段落にカーソルを合わせると、「dragleave」イベントも送信されます。

誰かがこれを防ぐ方法を知っていますか? または、ブラウザウィンドウを離れるときにのみ「ドラッグリーブ」する方法は?

ありがとう！

4

3 に答える 3

8

私は自分のオプションでより良い解決策に出くわしました。私が好まない傾向があるタイムアウトを使用する必要はありません。

CSSプロパティを持つようにオーバーレイを設定した場合

pointer-events:none

表示時にウィンドウのドラッグ イベントには影響せず、同じ効果を得ることができます。

于 2014-01-23T16:17:33.827 に答える
7

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-28T13:12:45.493 に答える
3

Nikolaj のおかげで、私は正しい答えにたどり着きました:

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

「これがフィドルでの完全な動作例です」

于 2013-02-28T13:45:28.830 に答える