CATALOGUE Code & Data Formation XHTML/CSS Apprendre HTML5 et CSS3 / Part 4 Maîtriser la Technique du Drag and Drop en HTML5 et JavaScript

Maîtriser la Technique du Drag and Drop en HTML5 et JavaScript

Drag and Drop
Vidéo non disponible ! Réessayez plus tard
Cette vidéo fait partie de la formation
Apprendre HTML5 et CSS3 / Part 4
Revoir le teaser Je m'abonne
4,5
Transcription
59,90€ Je commande
Formation incluse dans l'abonnement Elephorm Je m'abonne à Elephorm
DescriptionProgrammeAvis
4,5
59,90€ Je commande
Formation incluse dans l'abonnement Elephorm Je m'abonne à Elephorm

Introduction à la Technique du Drag and Drop

Objectifs

Les objectifs de cette vidéo sont d’enseigner la manipulation du drag and drop en HTML5, d’expliquer les éléments clés de l’API drag and drop, et de montrer comment intégrer cette fonctionnalité dans des projets web pour enrichir l’interactivité.

Résumé

Apprenez la méthode du drag and drop en HTML5 et JavaScript avec des explications détaillées sans réécriture du code.

Description

Pour cette leçon, nous abordons la technique du drag and drop. Cette méthode, bien que relativement complexe, sera simplifiée par une approche particulière. Au lieu de réécrire le code exhaustivement, chaque segment sera expliqué en détail. Vous apprendrez à créer un panier interactif où les éléments peuvent être glissés et déposés. Lorsqu'un élément est cliqué dans le panier, il est déplacé vers la corbeille, montrant ainsi les bases des interactions dynamiques avec l'API drag and drop de HTML5. Cette leçon couvre divers aspects tels que l'ajout d'attributs bonifiant les éléments, la gestion des événements de début (dragStart), de survol (dragOver), et de dépôt (drop), ainsi que la manipulation du DOM via JavaScript. Toute la structure est conçue pour être facilement adaptable à vos projets futurs, favorisant une compréhension profonde et pratique des fonctionnalités de drag and drop.

Voir plus

Questions - réponses

Quel attribut HTML est essentiel pour permettre le drag and drop d'un élément?
L'attribut HTML essentiel pour permettre le drag and drop d'un élément est draggable="true".
Quel est le rôle de la fonction <em>addEvent</em> dans le script présenté?
La fonction addEvent permet de gérer les événements de manière compatible avec différents navigateurs, incluant ceux qui utilisent addEventListener et attachEvent.
Comment l'identifiant unique est-il généré pour chaque élément déposé dans le panier?
L'identifiant unique est généré en utilisant le nombre de millisecondes depuis la dernière ouverture de l'ordinateur, ce qui garantit une grande probabilité d'unicité.

Programme détaillé

2 commentaires
4,5
2 votes
5
4
3
2
1
wfischli
Il y a 2 years
Commentaire
Bonne formation.
Dommage que M Audoux ne va pas toujours au terme de ses exemples. Il manque souvent un petit "clic" qui finaliserait le cours.
Je rejoins le commentaire précédent, à savoir qu'il manque les fichiers de travail avec lesquels il serait plus facile de s'exercer.
lyazid.meaux
Il y a 3 years
Commentaire
Très bonne formation, juste ce qu'il faut.
Est il possible d'avoir les exemples afin de pouvoir travailler dessus et ne pas être obliger de jongler entre l'éditeur et la vidéo.

Merci.