Nouveau
Formulaire accessibilité : guide pas à pas RGAA (HTML, CSS, JS)
Formulaire accessibilité : guide pas à pas RGAA (HTML, CSS, JS)
Je vous propose un nouvel atelier pratique pour perfectionner votre niveau en JavaScript moderne.
Dans cette formation en ligne, nous allons apprendre à maîtriser le "Glisser / Déposer" (utilisez Drag and Drop en anglais).
Cette fonctionnalité peut être très pratique sur certaines interfaces web et mobile et peut améliorer l'expérience utilisateur. Elle est par exemple utilisée en général dans les systèmes d'envoi de fichiers (uploaders).
Au programme de ce tuto Drag n' Drop en Javascript Moderne
Dans ce cours en vidéo nous allons donc apprendre à glisser déposer des éléments HTML sur l'écran.
Nous étudierons les événements JavaScript qui permettent de pouvoir gérer le glisser déposer des éléments HTML (comme dragstart, drapover, dragleave, drop...)
Puis, nous ferons ensemble un exercice d'application.
Un QCM vous sera proposé en fin de formation et vous permettra de valider les connaissances théoriques acquises pendant la formation.
Je reste disponible dans le salon d'entraide pour répondre à vos éventuelles questions sur ce cours.
Si vous voulez apprendre à programmer en JavaScript moderne, voici un bundle de 14H00 qui vous donnera toutes les bases.
Bonne formation !
Qu’allez-vous apprendre dans ce cours ?
Plan de cours
Chapitre 1
Les bases du glisser déposer
Les bases du glisser déposer
Chapitre 2
Plus loin avec le glisser déposer
Plus loin avec le glisser déposer
Chapitre 3
Exercice d'application
Exercice d'application
Chapitre 4
Conclusion
Conclusion
Plan détaillé du cours
Chapitre 1 : Les bases du glisser déposer
29m28
Leçon 1Mise en place HTML et CSS
Leçon 2Mise en place de l'événement dragstart
Leçon 3Mise en place de l'événement dragover
Leçon 4Mise en place de l'événement drop
Chapitre 2 : Plus loin avec le glisser déposer
17m50
Leçon 1Activer une zone via le CSS
Leçon 2Mise en place de l'événement dragleave
Leçon 3Inverser le déplacement
Leçon 4Plusieurs boîtes à déplacer
Chapitre 3 : Exercice d'application
1h08
Leçon 1Mise en place des bases
Leçon 2Mise en forme des boîtes Drop
Leçon 3Mise en place de la boîte item
Leçon 4Mise en place du glisser déposer des boîtes item
Leçon 5Préparation d'une modale
Leçon 6Mise en forme de la modale
Leçon 7On cache la modale
Leçon 8On programme la modale
Leçon 9On identifie la modale
Leçon 10Curiosité sur le côté backend
Chapitre 4 : Conclusion
49s
Leçon 1Conclusion
Avis des apprenants