8

No site do W3schools eles menciona que o evento ocorre em 350 milissegundos:

Note: While dragging an element, the ondrag event fires every 350 milliseconds.

Só que isso varia isso porque se eu arrastar um elemento e não move-lo ele vai ser disparado mais rápido ou seja vai ocorrer em uma quantidade menor de milissegundos agora se eu ficar arrastando e movendo o elemento ele vai ocorrer mais rápido ainda e em uma quantidade menor ainda de milissegundos.

Exemplo:

<!doctype html>
<html lang="pt-br">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #div1 {
            width: 100px;
            height: 100px;
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <div id="div1" draggable="true"></div>
    <p id="p1"></p>
    <script>
        let div1 = document.querySelector("#div1");
        let count = 0;

        div1.addEventListener("drag", function() {
            let p1 = document.querySelector("#p1");

            count ++;
            p1.innerHTML = `A div está sendo arrastada: ${count}`;
        });
    </script>
</body>
</html>

Notem no exemplo acima se eu arrastar o elemento e ficar com o mouse parado a variável count é incrementada mais lenta e se eu ficar arrastando e movendo o mouse a variável count é incrementada mais rápida. Só para complementar isso também ocorre com o evento mousemove. Em quantos milissegundos é chamado o evento drag ou depende que nem mostrado no exemplo acima?

6
  • 1
    acho que não vai achar uma resposta exata para essa pergunta, tipo, "são exatamente 291ms".. depende do sistema (computador), motor de renderização, talvez dos demais objetos no document... só de curiosidade, pq precisa desse valor? Commented 29/02/2020 às 11:04
  • Só quero saber por conhecimento mesmo, sou uma pessoa cética, não gosto de ter uma dúvida e não saber a resposta, também porque se outra pessoa me perguntar a mesma coisa eu não vou saber o que responder.
    – marquinho
    Commented 29/02/2020 às 11:33
  • 3
    entendi... acho que não deve ter uma resposta certa e exata, Ao arrastar tem um processamento, do navegador, do computador, do motor de renderização do navegador desenhar novamente o objeto que foi arrastado pra outro ponto... isso não deve ser preciso, a resposta talvez seja "em torno de XXXms" Commented 29/02/2020 às 11:35
  • 8
    W3schools não é lá uma fonte muito boa - já foi pior, hj melhorou um pouco, mas eu prefiro consultar o MDN, que diz que o evento é disparado "every few hundred milliseconds", ou seja, não tem um valor exato, pois depende de vários fatores, como já mencionado acima
    – hkotsubo
    Commented 29/02/2020 às 11:52
  • 1
    Obrigado! a todos vocês por terem respondido.
    – marquinho
    Commented 29/02/2020 às 12:20

1 Resposta 1

11
+50

Olá,

Os eventos de 'ondrag' (assim como outros do mesmo tipo, 'dragstart', 'dragenter', etc) implementam a interface 'DragEvent', da especificação do HTML5.

Esta interface define vários eventos e como estes devem ser acionados. Dentre outras coisas

Em relação a sua pergunta, você encontra no subtópico 5.7.5 uma descrição de como o user-agent deve se comportar quando o evento é disparado.

Dentre todo o conjunto de regras que precisam ser seguidas da especificação, você irá encontra o seguinte trecho:

Citação: Os 'user-agent' devem, assim que a operação de arrastar for iniciada e a cada 350ms (± 200ms) daí em diante, enquanto a operação de arrastar estiver em andamento, enfileirar uma tarefa para executar as seguintes etapas em sequência:

Ou seja, a cada 350ms, com tolerancia de 200ms para mais ou para menos, o evento é disparado.

Em relação a ser mais rápido quando está arrastando, ocorre pois ao se arrastar, inicia-se um novo processamento dos eventos. Do contrário, fica nos 350ms até que se finalize o evento ao soltar o botão do mouse.

Abaixo o link para a seção citada.

5.7.5 - Drag-and-drop processing models

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .