--
Avant de commencer, n'hésitez pas à regarder le TP-1 où l'on a vu les mouvements de la souris (exercice avec la peinture verte sur le pingouin).
Dans le fichier HTML, ajoutez la classe "en-mouvement", à la main, à une des deux boites vertes.
On veut que le coin en haut à gauche de la boite qui a la classe "en-mouvement" se trouve toujours à la même position que la souris.
Il vaut mieux suivre les mouvements de la souris sur l'élément <html> qu'à l'intérieur des boites.Si on suivait à l'intérieur de la boite, un grand mouvement de la souris pourrait faire sortir le pointeur de la boite et on "perdrait" la boite.(On profite du bubbling : même si l'événement mouvement se produit dans la boite, il "remonte" l'arbre DOM jusqu'à l'élément <html>. On peut donc utiliser un gestionnaire d'événements sur <html>, même si l'événement se produit dans la boite <h2>.)
Vous pouvez utiliser la fonction jQuery .offset() pour positionner la boite.
Ensuite, dans le fichier HTML, à la main, enlevez la classe "en-mouvement", de la boite pour la mettre sur l'autre boite.Vérifiez que ca marche.
Ensuite, n'oubliez d'enlever la classe "en-mouvement" des deux boites vertes.