Fix dragging functionality implemented using mousemove event in javascript

I tried to implement dragging (in javascript), using the mousemove event using this handler:

    function onMouseMove(e: MouseEvent) {
        let oldWorldClientX = World.value.clientX;
        let oldWorldClientY = World.value.clientY;

        Screen.value.clientX = e.clientX - Screen.value.width/2;
        Screen.value.clientY = e.clientY - Screen.value.height/2;
        World.value.clientX = (Screen.value.clientX / World.value.scale) - World.value.originX;
        World.value.clientY = (Screen.value.clientY / World.value.scale) - World.value.originY;

        const diffWorldClientX = World.value.clientX - oldWorldClientX;
        const diffWorldClientY = World.value.clientY - oldWorldClientY;

        if (Screen.value.middleclick) {
            World.value.originX += diffWorldClientX;
            World.value.originY += diffWorldClientY;
        }

        oldWorldClientX = World.value.clientX;        
        oldWorldClientY = World.value.clientY;
    }

From that the important part is the if statament.

        if (Screen.value.middleclick) {
            World.value.originX += diffWorldClientX;
            World.value.originY += diffWorldClientY;
        }

It changes the origin of the plane by the “difference” between the mouse movements relative to the world.

Now, this actually works. But the dragging is not fluid it clips (I don’t know if that’s the correct term), and if the mouse is moved rapidly, the plane is “left behind”(?).

I would like to know how to fix this to make the dragging fluid.

Honestly I haven’t tried anything since I don’t know what to try to fix this.

Edit 1: I tried adding a “timeout”, now looks like this:

    let oldWorldClientX = -1;
    let oldWorldClientY = -1;

    let drag = true;

    function onMouseMove(e: MouseEvent) {
        if (drag) {
            oldWorldClientX = World.value.clientX;
            oldWorldClientY = World.value.clientY;
        }

        Screen.value.clientX = e.clientX - Screen.value.width/2;
        Screen.value.clientY = e.clientY - Screen.value.height/2;
        World.value.clientX = (Screen.value.clientX / World.value.scale) - World.value.originX;
        World.value.clientY = (Screen.value.clientY / World.value.scale) - World.value.originY;

        if (drag) {
            const diffWorldClientX = World.value.clientX - oldWorldClientX;
            const diffWorldClientY = World.value.clientY - oldWorldClientY;

            if (Screen.value.middleclick) {
                World.value.originX += diffWorldClientX * 2;
                World.value.originY += diffWorldClientY * 2;
            }

            oldWorldClientX = World.value.clientX;        
            oldWorldClientY = World.value.clientY;

            drag = false;
            setTimeout(() => { drag = true }, 10);
        }
    }

That actually made it slightly better, (also I realized that I had to multiply the diffWorldClient X and Y times two), Now it follow the mouse correctly but still clips a little bit.