JS exercise given at HEPL
js-tp-click-and-drag-to-scroll is an educational project, which will be used for JS courses.
Note: the school where the course is given, the HEPL from Liège, Belgium, is a french-speaking school. From this point, the instruction will be in french. Sorry.
Lors de vos cours de web, vous allez découvrir le langage JavaScript et le mettre en pratique pour apprendre à rendre vos pages web interactives.
Dans le cadre de cet exercice nous vous demandons de permettre à l'utilisateur de se déplacer dans le slider à l'aide de sa souri en faisan du drag, (maintenir le clic enfoncé et se délacer). Nous retiendrons qu’il s’agit ici d’un exemple scolaire puisqu’en temps normal l’utilisateur doit pouvoir utiliser le site internet intégralement au clavier. Il serait donc nécessaire de prévoir des alternatives au clavier.
- Écouter l'événement clique.
- Ensuite, observez le déplacement horizontal en vue d’appliquer par JavaScript un scroll horizontal à l'élément
.items. - Dès que l’événement
mouseupoumouseleavesurvient, vous devez arrêter ce déplacement.
- Ensuite, observez le déplacement horizontal en vue d’appliquer par JavaScript un scroll horizontal à l'élément
Avant de commencer l'exercice, posez-vous afin de comprendre et surtout décomposer le mouvement de drag que l'on pourrait voir comme suit.
Vous devrez aussi opter pour une stratégie afin de calculer le déplacement horizontal lors du drag. Car c'est ce nombre qui vous indique de combien de pixels, vous devez déplacer le slider. Vous pourriez déterminer une origine. Donc un point d’ancrage ( obtenu au premier clic ) que vous pouvez comparer avec les nouvelles coordonnées obtenues pendant le déplacement (mousemove). Notez que ce nombre peut être multiplié afin d’amplifier l’effet de déplacement du slider.