article(s) dans votre panier VOIR

Fonction Drag and Drop

  • Vidéo 31 sur 32
  • 4h15 de formation
  • 32 leçons

Un contenu flash devrait s'afficher ici. Votre navigateur ne comporte pas de plugin flash, ou il ne s'est pas correctement initialisé.

Vous pouvez télécharger le plugin flash depuis le site d'Adobe à l'adresse suivante : http://get.adobe.com/flashplayer/.

Pour accéder à la suite de cette formation, vous devez vous abonner.
previous
summary
resume
next
play
Drag and Drop
00:00 / 07:50
HD
fullscreen
Je m’abonne
à partir de 16,6 € / mois
  • Visionnage en ligne
  • Accès illimité à toutes nos formations
OU
J'achète uniquement
la formation
49,90€
  • Téléchargement + VOD à vie
  • Accès uniquement à cette formation

Sommaire de la formation

Détails de la formation

Dans cette leçon, Thierry Audroux nous fait découvrir la technique de « Drag and Drop ». Cette technique est relativement complexe, c'est la raison pour laquelle, nous allons un peu changer de méthode de travail dans ce tutoriel. Le formateur vous montre quoi faire et vous explique le code sans pour autant le réécrire, car cette technique requiert beaucoup de lignes de codes. Dans cet exemple, nous allons voir comment placer des produits dans un panier. Les différents éléments dans le code HTML sont placés dans une liste 'ul' avec les articles dans chacune de ces listes. Il est important que chaque élément comporte l'attribut « draggable ». Chaque élément possède également un identifiant différent, ce qui permet de les conserves au moment où nous allons les « dragger » (placer dans le panier). Au niveau du script en langage JavaScript, celui-ci a été créé pour l'ensemble des navigateurs. Une petite fonction « addEv » permet de réaliser ce que l'on appelle un « écouteur » et teste les différents navigateurs pour voir si ces derniers acceptent « addEventListener ». Il faut ensuite mettre en lien dans une variable « links » l'élément « li.article », ainsi qu'une variable élément « null » et une variable « panier ». Pour chacun de ces différents éléments, il va falloir affecter un script dynamiquement.