JavaScript moderne avancé - Drag and Drop
Problème de lecture
Cette vidéo ne semble pas disponible
00:00
00:00

TUTO JavaScript moderne avancé - Drag and Drop

Carl Brison
23,00€
Acheter maintenant, payer plus tard. En savoir plus

Téléchargement & visionnage illimité

Satisfait ou remboursé

Paiement 100% sécurisé

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
Chapitre 2
Plus loin avec le glisser déposer
Chapitre 3
Exercice d'application
Chapitre 4
Conclusion

Plan détaillé du cours

Chapitre 1 : Les bases du glisser déposer
29m28s
 
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
17m50s
 
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
1h08m
 
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

Détail des avis
5
Apprenants
5
Commentaires
5/5
Note moyenne
5/5
5
4/5
0
3/5
0
2/5
0
1/5
0
Alain Tardif
Alain Tardif
Publié le 26/07/2023
Merci Carl, j'ai vraiment bien aimé ce tuto sur le drag and drop suivi de l'exercice. Plein de conseils, astuces et l'utilisation de la modale en JS 👍. Ce genre de cours est applicable dans n'importe quel projet professionnel. Rien à dire de plus, c'est super. Validé 100 % JS_moderne_avancé-DragAndDrop
Carl Brison
Carl Brison
Je suis ravi que ce tuto vous ait plu ! Merci beaucoup pour votre commentaire, Alain ;-)
Valérie Arno
Valérie Arno
Publié le 02/12/2022
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
Carl Brison
Carl Brison
Merci pour votre commentaireValérie ;-)
Jean-Claude Warg-Briers
Jean-Claude Warg-Briers
Publié le 01/02/2022
Bien expliqué , pas simple de connaître les méthodes et propriété à employer .
Carl Brison
Carl Brison
Merci pour votre commentaire

Vos questions sur le cours

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

Payer plus tard

Prix d'achat : 23,00 €
Pour payer plus tard, sélectionnez Klarna comme moyen de paiement lors du règlement.

Ajoutez des articles à votre panier

Sélectionnez Klarna lors du règlement

Recevez une autorisation

Payez dans 30 jours

Klarna : conditions d'utilisation du paiement différé.

Attendez ! 🤗

Accédez à plus de 1359 tutos gratuits

Notre politique de protection des données