Discussion :

[nialcen]

Bonjour a tous et a toutes.

Je serait bref et aussi clair que possible.

j'ai ceci.

Je souhaite modifier le script pour qu'au lieu de devoir cliquer sur chaque case pour modifier ma carte, je maintienne le clic enfoncé, puis 'glisse' sur les case pour 'tracer un trait' de l'image choisie.

Je ne sais pas comment réaliser cette modification, quelqu'un serait il en mesure de m'aider ?

[Watilin]

Salut,
voilà un problème intéressant

L’idéal tout d’abord ce serait que tu utilises des gestionnaires d’évènements, ça t’éviterait d’avoir du JavaScript dans le code HTML.
En plus, les gestionnaires te permettent de faire de la délégation, c’est-à-dire surveiller un conteneur au lieu de surveiller chacun de ses éléments enfants (en l’occurence, surveiller la map entière au lieu de devoir surveiller chaque tile séparément).
Enfin c’est juste un conseil.

Pour faire ce que tu cherches à faire, je pense que la meilleure solution est de surveiller le mousemove sur ta map, et de garder en mémoire un flag qui indique si le bouton de la souris est enfoncé ou non. (J’ai vérifié, on n’a pas l’info avec un évènement « move ».)

Plus techniquement :
– mousedown sur la map -> mettre le flag à true
– mouseup sur tout le document -> mettre le flag à false
– mousemove sur la map -> si le flag est true, changer la case, sinon ne rien faire
– click sur la map -> changer la case, sinon ça ne marchera pas si on clique simplement sans bouger.

C’est important de surveiller le mouseup sur tout le document car l’utilisateur peut être sorti de la map en allant trop vite.

Enfin, il est important d’empêcher le comportement par défaut du navigateur lors d’un mousemove avec le bouton enfoncé, pour éviter les interférences : sélection de texte, glisser/déposer de Firefox (je comprends pas à quoi il sert d’ailleurs…), etc.


J’ai fait quelques tests que tu trouveras dans le petit zip ci-joint. J’y ai mis des commentaires explicatifs, mais si tu as besoin de précisions, je suis dispo !