Como detectar o evento dragleave no Firefox ao arrastar para fora da janela

Question

Apr 20, 2012, 11:17 PM

Como detectar o evento dragleave no Firefox ao arrastar para fora da janela

O Firefox não ativa corretamente o evento arrastar ao arrastar para fora da janela:

https://bugzilla.mozilla.org/show_bug.cgi?id=665704

https://bugzilla.mozilla.org/show_bug.cgi?id=656164

Estou tentando desenvolver uma solução alternativa para isso (o que sei que é possível porque o Gmail está fazendo isso), mas a única coisa que posso fazer é realmente hackear.

Uma maneira de saber quando arrastar para fora da janela ocorreu para esperar pelodragover evento para parar de disparar (porquedragover dispara constantemente durante uma operação de arrastar e soltar). Aqui está como eu estou fazendo isso:

<code>var timeout;

function dragleaveFunctionality() {
  // do stuff
}

function firefoxTimeoutHack() {
  clearTimeout(timeout);
  timeout = setTimeout(dragleaveFunctionality, 200);
}

$(document).on('dragover', firefoxTimeoutHack);
</code>

Esse código é essencialmente criar e limpar um tempo limite repetidas vezes. O tempo limite de 200 milissegundos não será atingido, a menos quedragover evento para demitir.

Embora isso funcione, não gosto da ideia de usar um tempo limite para essa finalidade. Parece errado. Isso também significa que há um pequeno atraso antes que o estilo "dropzone" desapareça.

A outra ideia que tive foi detectar quando o mouse sai da janela, mas as formas normais de fazer isso não parecem funcionar durante as operações de arrastar e soltar.

Alguém aí tem uma maneira melhor de fazer isso?

ATUALIZAR:

Aqui está o código que estou usando:

<code><!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Drag and Drop Issue</title>
  <script src="http://code.jquery.com/jquery.js"></script>
</head>
<body>
  Open up the console and look at what number is reporting when dragging files in and out of the window. The number should always be 0 when leaving the window, but in Firefox it's not.
  <script type="text/javascript">
    $(function() {
      var counter = 0;
      $(document).on('dragenter', function(e) {
        counter += 1;
        console.log(counter, e.target);
      });
      $(document).on('dragleave', function(e) {
        counter -= 1;
        console.log(counter, e.target);
      });
    });
  </script>  
</body>
</html>
</code>