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
  • Découvrez pourquoi vous former avec Tuto.com
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é 235 tutoriels et obtenu une note moyenne de 4,9/5 sur 15 587 tutoriels vendus. Carl Brison est un formateur certifié tuto.com. Voir les autres formations de Carl Brison

5,0
note moyenne

2
avis laissés
5 étoiles
2
4 étoiles
0
3 étoiles
0
2 étoiles
0
1 étoile
0
  • 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 "

  • 5
    avis de uderghal laissé le 04/03/2021
    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!
    "Merci pour votre commentaire. Un certain nombre d'exercices autour du JS suivront. Vous devriez ainsi être plus à l'aise pour arriver à vos fins. Concernant la mise en place d'un éditeur, il suffit simplement de le charger souvent via une classe sur un textarea."

  • 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 1360 tuto gratuits


non, je ne veux pas me former gratuitement

voir notre politique de protection des données