デスクトップからブラウザにファイルをドラッグするときに 'dragenter'にオーバーレイを表示する

Question

imgur.comと同じ効果を得ようとしています（デスクトップからimgur.comにファイルをドラッグするとクールオーバーレイ）。 Event propagation, overlay and drag-and-drop events

しかし、私は解決策がかなり不満であることを発見しました。 問題は$（document）.on（ 'dragenter'）が子要素の上をホバリングしたときに何度も起動されることです。ビューポートに入るとビューポートに入るときに一度起動されるイベントを探していたので、dragenterとdragleaveにクリーンな$ overlay.fadeIn（）と.fadeOut（）を持つことができました。

私はビューポート全体を塗りつぶす透明な要素でそれを解決しました。私は$（document）の代わりにその透明な要素のdragenterを呼び出します。 $（ '*：visible'）。live（ 'dragenter'）私は隠された実際のオーバーレイを表示します。 $（ '＃transparentOverlay'）。on（ 'dragleave'）はオーバーレイを隠します。かなりハックそれが

ちょうどセレクタ$（「*：目に見える」）（少なくともサファリ/クローム/ Firefoxで）動作します。

誰もがより良いが...私に頭痛を与え）（生きます提案？

Answer 1

発生しているコード/エラーをもっと見る必要があります。単純なブール値を試して、イベントが発生したときをチェックし、その後のイベントを制限しましたか？

var dragging = false; 

$(document).on('dragenter', function(){ 
    if(!dragging){ 
     //DO SOMETHING 
     dragging = true; 
    } 
}); 

$(document).on('dragleave', function(){ 
    if(dragging){ 
     //DO SOMETHING 
     dragging = false; 
    } 
}); 

Answer 2

これは私のためにうまくいきます。基本的に、それはdragenterとdragleaveイベントを模倣していますが、唯一のdragoverを使用して：

;(function() { 
    var isOver = false, interval; 

    $(document).on('dragover', function(e) { 
     e.preventDefault(); 

     clearInterval(interval); 

     interval = setInterval(function() { 
      isOver = false; 
      clearInterval(interval); 

      /*** callback for onDragLeave ***/ 
     }, 100); 

     if (!isOver) { 
      isOver = true; 

      /*** callback for onDragEnter ***/ 
     } 
    }); 
})(); 

Answer 3

上記の回答の軽量版：

;(function() { 
    var dragTimeout; 

    $(document).on('dragenter', function(e) { 
     // dragenter code 
    }); 

    $(document).on('dragleave', function(e) { 
     dragTimeout = setTimeout(function() { 
      dragTimeout = undefined; 
      // your dragleave code 
     }); 
    }); 

    $(document).on('dragover', function(e) { 
     if (dragTimeout) { 
      clearTimeout(dragTimeout); 
      dragTimeout = undefined; 
     } 
    }); 
})();