Mostrar superposición en 'dragenter' al arrastrar un archivo desde el escritorio al navegador

Question

Estoy tratando de lograr el mismo efecto que en imgur.com (arrastre un archivo desde el escritorio a imgur.com y verá una imagen genial cubrir). ya tiene una solución de trabajo gracias a esta publicación: Event propagation, overlay and drag-and-drop events

PERO: me parece la solución bastante insatisfactoria. el problema es $ (document) .on ('dragenter') se dispara varias veces al pasar el ratón sobre elementos secundarios. Estaba buscando un evento que se dispara UNA VEZ cuando entro en la ventana gráfica y UNA VEZ que salgo de la ventana gráfica para poder tener $ overlay.fadeIn() y .fadeOut() limpios en dragenter y dragleave.

Lo resolví con un elemento transparente que llena toda la ventana gráfica. Luego llamo a dragenter sobre ese elemento transparente en lugar de sobre $ (documento). con $ ('*: visible'). live ('dragenter') luego muestro la superposición oculta y real. $ ('# transparentOverlay'). on ('dragleave') oculta las superposiciones. bastante hacky pero funciona (al menos en Safari/Chrome/Firefox)

pero sólo el selector de $ ('*: Visible'). live() me da un dolor de cabeza ...

Alguien tiene una mejor ¿sugerencia?

Answer 1

Puede que necesite ver más código/errores que está experimentando. ¿Has probado un booleano simple para verificar cuándo se ha disparado tu evento y limitar los eventos posteriores?

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

Pruébalo así, lo que funciona bien para mí. Esencialmente, es imitando a los dragenter y dragleave eventos, pero sólo usando 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

Una versión más ligera de la respuesta anterior:

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