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
-
J'ai très apprécié ce tuto car j'ai connu le système drag & drop dans un passé lointain et je me demandais comment ça se faisait. Pas trop difficile quand on compris le truc (côté javascript). Pour reprendre le commentaire d'un apprenant, dommage pour la modale qui donne 5 fois le même article. Mais ce n'était pas le but du tuto. Merci pour ce cours sympa. C'est un prérequis pour je ne sais plus quel autre tuto. Ma mémoire est ramollie par l'hiver (ou l'âge peut-être). :-) A bientôt
-
Bien expliqué , pas simple de connaître les méthodes et propriété à employer .
-
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')"
-
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