Mostra overlay su 'dragenter' durante il trascinamento di un file dal desktop al browser

Question

sto cercando di ottenere lo stesso effetto di imgur.com (trascina un file dal desktop su imgur.com e vedrai un bel overlay). Ho già una soluzione operativa grazie a questo post: Event propagation, overlay and drag-and-drop events

MA: trovo la soluzione piuttosto insoddisfacente. il problema è $ (document). On ('dragenter') viene generato più volte quando si passa con il mouse su elementi figlio. Stavo cercando un evento che viene attivato UNA volta quando entro nel viewport e UNA VOLTA quando esco dal viewport così potrei avere un $ overlay.fadeIn() e .fadeOut() su dragenter e dragleave.

ho risolto con un elemento trasparente che riempie l'intera finestra. quindi chiamo dragenter su quell'elemento trasparente invece che su $ (documento). con $ ('*: visible'). live ('dragenter') quindi mostro il nascosto e il reale overlay. $ ('# transparentOverlay'). on ('dragleave') nasconde le sovrapposizioni. abbastanza hacky ma funziona (almeno in Safari/Chrome/Firefox)

, ma solo il selettore $ ('*: visibile'). vivere() mi dà un mal di testa ...

chiunque ha una migliore suggerimento?

Answer 1

Potrebbe essere necessario vedere più codice/errori che stai riscontrando. Hai provato un semplice booleano per controllare quando il tuo evento ha sparato e limitare gli eventi successivi?

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

Provalo in questo modo, che funziona bene per me. In sostanza, è imitando il dragenter e dragleave eventi, ma solo utilizzando 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 versione più leggera della risposta di cui sopra:

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