데스크톱에서 브라우저로 파일을 드래그 할 때 'dragenter'에 오버레이 표시

Question

imgur.com에서와 동일한 효과를 얻으려고합니다 (데스크톱에서 imgur.com으로 파일을 드래그하면 멋지게 보입니다. 위에 까는 것). 이 게시물 덕분에 이미 해결책을 찾을 수 있습니다. Event propagation, overlay and drag-and-drop events

그러나 해결책은 다소 부족합니다. 문제는 $ (document) .on ('dragenter')이 자식 요소 위로 마우스를 가져 가면 여러 번 발생하는 문제입니다. 내가 뷰포트를 입력 할 때 한 번 해고되는 이벤트를 찾고 있었고 뷰포트를 떠나서 dragenter 및 dragleave에 깨끗한 $ overlay.fadeIn() 및 .fadeOut()을 가질 수있었습니다.

전체 뷰포트를 채우는 투명 요소로 해결했습니다. 그런 다음 $ (document) 대신에 transparent 요소에 dragenter를 호출합니다. $ ('* : visible'). live ('dragenter') 숨겨진 실제 오버레이를 보여줍니다. $ ('# transparentOverlay'). on ('dragleave') 오버레이를 숨 깁니다. 꽤 해키하지만

있었으나 결국 선택 $ ('* : 보이는') (적어도 사파리/크롬/파이어 폭스에서) 작동합니다.

사람이 더 나은이 ... 나에게 두통을 제공) (살 암시?

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