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 !
Table des matières de cette formation JavaScript (durée : 1h56m)
-
Les bases du glisser déposer
- Mise en place HTML et CSS 00:06:12
- Mise en place de l'événement dragstart 00:09:59
- Mise en place de l'événement dragover 00:05:19
- Mise en place de l'événement drop 00:07:58
-
Plus loin avec le glisser déposer
- Activer une zone via le CSS 00:07:21
- Mise en place de l'événement dragleave 00:04:06
- Inverser le déplacement 00:02:33
- Plusieurs boîtes à déplacer 00:03:50
-
Exercice d'application
- Mise en place des bases 00:08:49
- Mise en forme des boîtes Drop 00:05:50
- Mise en place de la boîte item 00:11:44
- Mise en place du glisser déposer des boîtes item 00:08:41
- Préparation d'une modale 00:08:32
- Mise en forme de la modale 00:05:10
- On cache la modale 00:04:18
- On programme la modale 00:04:59
- On identifie la modale 00:04:30
- Curiosité sur le côté backend 00:06:12
-
Conclusion
- Conclusion 00:00:49
- Fichiers sourcestélécharger
- QCMaccéder
- Certificat
Formateur : Carl Brison
-
Encore un joli jouet, même si on a 5 fois le même article, ce qui rend caduque (ou vaine) la combine de l'écriture du n° dans le titre... À ce propos, comme je tente d'anticiper le plus possible pour voir si j'ai compris, j'ai pu observer que "this.id" fonctionne, sans passer par "getAttribute('id')"
-
Un très bon tuto comme toujours. Mr Brison, justement est-ce qu'on peut dynamiser nos articles avec du JS comme on le fait avec PHP ? Aussi, comment intégrer l'éditeur TinyMCE et ainsi rédiger normalement et publier des articles sur son blog ( y compris les Datas...)? Je vous remercie de votre réponse Mr Brison!
-
Avec quelle version de logiciel ce tuto est-il compatible ?CSS 3
-
Que contient le fichier source ?Le code source de ce tuto
-
Quel est le niveau requis pour suivre ce tuto ?intermédiaire
note moyenne
avis laissés