bonjour a tous.

Je développe un site qui permet de déplacer des cadres avec Jquery.

Mais quand on déplace les cadres et que la souris franchie le bord d'un cadres, il glitch, vibre.

Si quelqu'un sais comment supprimer les glitch ET/OU réduire la latence entre le déplacement des cadres et le pointeur (pour éviter qu'il franchisse le bord d'un cadre)

Lien Codepen : https://codepen.io/PULSAR2105/pen/ExvaNeQ

Merci d'avance

-
Edité par PULSAR2105 11 octobre 2021 à 21:24:17

Salut,

Ton problème ce trouve lignes 49 et 50.

event.target représente la cible la plus imbriquée subissant l'événement mousemove. Or, lorsque ta souris ce déplace un peu trop vite, cette cible peut changer.

Exemple : Imaginons que ton événement mousedown ce déclenche sur une <div class="chunk"> comme élément le plus imbriqué (la zone bleu extérieur). Dans ce cas, event.target désigne cette div.chunk et les valeurs X et Y sont relative aux offsetLeft et offsetTop de cet élément. Maintenant, si ta souris ce déplace trop vite et dans la <div class="text"> enfant, alors event.target2 désigne ce second élément qui possède des valeur offsetLeft et offsetTop différentes. Les variations que tu appelles offsetX et offsetY se représente donc plus seulement le déplacement de la souris, mais également la marge existante entre div.chunk et div.text.

Tu peux résoudre ça en remplaçant tes ligne 49 et 50 comme ça (avec l'usage de event.target plutôt que event2.target) :

//              var posX = event2.pageX - event2.target.offsetLeft;
//              var posY = event2.pageY - event2.target.offsetTop;
// ==>
                var posX = event2.pageX - event.target.offsetLeft;
                var posY = event2.pageY - event.target.offsetTop;