jQuery drag - problem with fast mouse movement

This script listed in stackoverflow question

HTML

<!DOCTYPE html>

<html lang="fr" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>Test</title> <!--Titre de la page dans l'onglet en haut-->
    <link href="main.css" rel="stylesheet" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script type="text/javascript" src="app.js" async></script>
    <script>
        (window.jQuery || document.write('<script src="/scripts/jquery-3.6.0.min.js"><\/script>'));
    </script> <!--Charger jQuery depuis fichier local si le CDN est indisponible-->
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
</head>

<body>
    <div id="bloc_page">
        <header>
            <h1>Les Jours de la Semaine - 曜日</h1>
        </header>

        <section id="section">
            <div id="propositions">
                <ul>
                    <li class="yobi">げつようび</li>
                    <li class="yobi">かようび</li>
                    <li class="yobi">すいようび</li>
                    <li class="yobi">もくようび</li>
                    <li class="yobi">きんようび</li>
                    <li class="yobi">どようび</li>
                    <li class="yobi">にちようび</li>
                </ul>
            </div>
        </section>
    </div>
</body>
</html>

CSS

#bloc_page {
    width: 75%;
    margin: auto;
    min-width: 900px;
}

#section {
    display: flex;
    height: 500px;
    border: solid 1px;
}

h1 {
    text-align: center;
}

/* Jeu */
.yobi.ui-draggable-dragging {
    border: dashed rgba(53, 187, 243, 0.9);
}

#propositions {
    height: 100%;
    width: 25%;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.yobi {
    border: solid rgba(53, 187, 243, 0.9);
    padding: 8px;
    margin: 10px;
    font-size: 24px;
    font-weight: bold;
    text-align: center;
    list-style-type: none;
    background-color: white;
    user-select: none;
}

    :hover {
        border-color: rgba(255, 134, 172, 0.9);
        cursor: pointer;
}

    :active {
        cursor: none;
    }

JavaScript

// Problèmes : décalage souris et drag + drop alert avec touch ?

$(document).ready(function () {
    $("#bloc_page").hide().fadeIn(1500);
})

$(init);
function init() {
    $('.yobi').draggable({ // rendre les propositions draggable
        containment: 'section',
    });

// Rendre draggable en tactile
    var container = document.querySelector("#section");
    var activeItem = null;

    var active = false;

    container.addEventListener("touchstart", dragStart, false);
    container.addEventListener("touchend", dragEnd, false);
    container.addEventListener("touchmove", drag, false);

    container.addEventListener("mousedown", dragStart, false);
    container.addEventListener("mouseup", dragEnd, false);
    container.addEventListener("mousemove", drag, false);

    function dragStart(e) {

        if (e.target !== e.currentTarget) {
            active = true;

            // item avec lequel on interagit
            activeItem = e.target;

            if (activeItem !== null) {
                if (!activeItem.xOffset) {
                    activeItem.xOffset = 0;
                }

                if (!activeItem.yOffset) {
                    activeItem.yOffset = 0;
                }

                if (e.type === "touchstart") {
                    activeItem.initialX = e.touches[0].clientX - activeItem.xOffset;
                    activeItem.initialY = e.touches[0].clientY - activeItem.yOffset;
                } else {
                    console.log("doing something!");
                    activeItem.initialX = e.clientX - activeItem.xOffset;
                    activeItem.initialY = e.clientY - activeItem.yOffset;
                }
            }
        }
    }

    function dragEnd(e) {
        if (activeItem !== null) {
            activeItem.initialX = activeItem.currentX;
            activeItem.initialY = activeItem.currentY;
        }

        active = false;
        activeItem = null;
    }

    function drag(e) {
        if (active) {
        ...