In how many milliseconds is the drag event fired?

Asked

Viewed 250 times

8

On the website of W3schools they mention that the event takes place in 350 milliseconds:

Note: While dragging an element, the ondrag Event Fires Every 350 milliseconds.

Only that it varies this because if I drag an element and does not move itlo it will be fired faster or it will occur in a smaller amount of milliseconds now if I keep dragging and moving the element it will occur faster still and in an even smaller amount of milliseconds.

Example:

<!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>

Note in the example above if I drag the element and keep the mouse stopped the variable count is incremented slower and if I keep dragging and moving the mouse the variable count is incremented faster. Just to complement this also occurs with the event mousemove. In how many milliseconds is called the event drag or depends on whether or not shown in the example above?

javascript
  • 1

    I don’t think you’re gonna find an exact answer to that question, like,, "are exactly 291ms".. depends on the system (computer), rendering engine, perhaps of the other objects in the Document... just curiosity, because you need this value?

  • I just want to know for myself, I’m a skeptical person, I don’t like to have a question and not know the answer, also because if someone else asks me the same thing I won’t know what to answer.

  • 3

    got it... I think there should not have a right and exact answer, When dragging has a processing, browser, computer, browser rendering engine"

  • Thanks! for having answered at least I had an idea of why this occurs with this event. But then why W3schools have established a fixed value of milliseconds?

  • 8

    W3schools is not a very good source - has been worse, hj improved a little, but I prefer to consult the MDN, that says that the event is triggered "Every few Hundred milliseconds", ie it does not have an exact value, because it depends on several factors, as already mentioned above

  • 1

    Thank you! to all of you for having responded.

Show 1 more comment

1 answer

13

Hello,

Ondrag events (as well as others of the same type, dragstart, dragenter, etc.) implement the HTML5 specification 'Dragevent' interface.

This interface defines various events and how these should be triggered. Among other things

Regarding your question, you find in Subtopic 5.7.5 a description of how the user-agent should behave when the event is triggered.

Among the whole set of rules that need to be followed by the specification, you will find the following excerpt:

Quote: User-agent must, as soon as the drag operation is started and every 350ms ( 200ms) thereafter, as long as the drag operation is in progress, queue a task to perform the following steps in sequence:

That is, every 350ms, with tolerance of 200ms for more or for less, the event is triggered.

In relation to being faster when dragging, it occurs because when dragging, a new processing of events begins. Otherwise, it stays at 350ms until the event is finished when the mouse button is released.

Below the link to the cited section.

5.7.5 - Drag-and-drop Processing models

Browser other questions tagged javascript

You are not signed in. Login or sign up in order to post.