Vous êtes ici

Le Drag and Drop en HTML5

Programmez!
 
Le drag and drop (ou glisser-déposer n'est pas nouveau dans le web, mais pour le mettre en place, il a toujours fallu passer par des librairies Javascript, plus ou moins complexes car aucune API native n'existait. Depuis HTML5, cette API est enfin arrivée et nous allons voir comment elle fonctionne. 
 
Sachez qu’actuellement elle n’est pas très bien prise en charge (surtout sur les mobiles), et qu’il y a même encore des différences entre Chrome et Firefox, qui la comprennent pourtant tous les deux.
Je ne couvrirai pas les syntaxes particulières pour des navigateurs un peu trop anciens mais vous montrerai le code minimum nécessaire pour faire fonctionner le Drag and Drop. A noter cependant qu’il existe d’autres attributs et propriétés additionnels pour agrémenter le tout.
 
Il y a 3 étapes de base à réaliser :
  • Définir un élément déplaçable (c’est la source)
  • Définir un élément capable de recevoir un autre élément (c’est la cible)
  • Définir un comportement de déplacement et de dépôt via Javascript
 
Plusieurs événements sont exploitables pour réaliser cela, parmi eux nous trouvons :
  • dragstart : déclenché lors du début du déplacement d’un objet et actif pendant le déplacement
  • dragend : déclenché lors de la fin du déplacement d’un objet
  • dragover : déclenché en continu tant que la souris survole la cible
  • dragenter : déclenché lors de l’entrée sur une cible avec un objet
  • dragleave : déclenché lors de la sortie d’une cible
  • drop : déclenché lors du dépôt d’un objet sur une cible
 
Les étapes pour faire fonctionner le Drag and Drop 
 
 
Etape 1 : Rendre un élément déplaçable
 
Il suffit d’ajouter l’attribut draggable="true" sur n’importe quel élément HTML. C’est tout !
 
<img src="https://www.netapsys.fr/photo1.jpg" alt="" draggable="true">
 
Etape 2 : Définir un élément récepteur des déplacements (une cible)
 
La cible peut être tout élément HTML auquel on attache les événements relatifs à la réception d’un autre élément (dragenter, dragleave, drop).
Il suffit donc de lier ces événements à l’élément qui devra être la cible.
 
Vous souhaitez découvrir le reste des étapes ? Cliquez ici
 

 

Déjà utilisateur ?

Vous avez déjà rempli le formulaire complet pour télécharger une de nos publications ?
Alors il vous suffit de renseigner votre adresse email pour lancer le téléchargement.

Email *