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?