23,00

Tuto JavaScript moderne avancé - Drag and Drop avec JavaScript

23,00

  • Une formation vidéo de 1h56m
  • Téléchargement immédiat et visionnage illimité à vie
  • Satisfait ou remboursé
  • Fichiers sources inclus
JavaScript moderne avancé - Drag and Drop

ajouter ce cours aux favoris retirer ce cours des favoris

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



Formateur : Carl Brison

Carl Brison a publié 277 tutoriels et obtenu une note moyenne de 4,9/5 sur 17 665 tutoriels vendus. Carl Brison est un formateur certifié tuto.com. Voir les autres formations de Carl Brison

5,0
note moyenne

4
avis laissés
5 étoiles
4
4 étoiles
0
3 étoiles
0
2 étoiles
0
1 étoile
0
  • 5
    avis de valerie-a77 laissé 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
    "Merci pour votre commentaireValérie ;-)"

  • 5
    avis de membre-7129-6122 laissé le 01/02/2022
    Bien expliqué , pas simple de connaître les méthodes et propriété à employer .

  • 5
    avis de zolb laissé le 13/07/2021
    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')"
    "This représente l'objet courant, alors si vous lui faites référence, ça peut marcher "

  • 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
Parcours Developpeur Front End
accédez à plus de 1462 tuto gratuits


non, je ne veux pas me former gratuitement

voir notre politique de protection des données