Tutoriel HTML

ACCUEIL HTML Introduction HTML Éditeurs HTML HTML de base Éléments HTML Attributs HTML En-têtes HTML Paragraphes HTML Styles HTML Formatage HTML Citations HTML Commentaires HTML Couleurs HTML HTMLCSS Liens HTML Images HTML Icône de favori HTML Tableaux HTML Listes HTML Bloc HTML et Inline Cours HTML Identifiant HTML Iframes HTML HTMLJavaScript Chemins d'accès aux fichiers HTML Tête HTML Mise en page HTML HTML réactif Code informatique HTML Sémantique HTML Guide de style HTML Entités HTML Symboles HTML Émojis HTML Jeu de caractères HTML Encodage d'URL HTML HTML contre XHTML

Formulaires HTML

Formulaires HTML Attributs de formulaire HTML Éléments de formulaire HTML Types d'entrée HTML Attributs d'entrée HTML Attributs du formulaire de saisie HTML

Graphiques HTML

Canevas HTML HTML SVG

Médias HTML

Médias HTML Vidéo HTML Audio HTML Modules externes HTML YouTube HTML

API HTML

Géolocalisation HTML Glisser/déposer HTML Stockage Web HTML Travailleurs Web HTML HTML SSE

Exemples HTML

Exemples HTML Questionnaire HTML Exercices HTML Certificat HTML Résumé HTML Accessibilité HTML

Références HTML

Liste de balises HTML Attributs HTML Attributs globaux HTML Prise en charge du navigateur HTML Événements HTML Couleurs HTML Canevas HTML HTML Audio/Vidéo Doctypes HTML Jeux de caractères HTML Encodage d'URL HTML Codes de langue HTML Messagerie HTTP Méthodes HTTP Convertisseur PX en EM Raccourcis clavier

API de glisser-déposer HTML


En HTML, n'importe quel élément peut être glissé et déposé.


Exemple

W3Schools

Faites glisser l'image W3Schools dans le rectangle.


Glisser déposer

Le glisser-déposer est une fonctionnalité très courante. C'est lorsque vous "saisissez" un objet et que vous le faites glisser vers un autre emplacement.


Prise en charge du navigateur

Les chiffres du tableau indiquent la première version du navigateur qui prend entièrement en charge le glisser-déposer.

API
Drag and Drop 4.0 9.0 3.5 6.0 12.0

Exemple de glisser-déposer HTML

L'exemple ci-dessous est un simple exemple de glisser-déposer :

Exemple

<!DOCTYPE HTML>
<html>
<head>
<script>
function allowDrop(ev) {
  ev.preventDefault();
}

function drag(ev) {
  ev.dataTransfer.setData("text", ev.target.id);
}

function drop(ev) {
  ev.preventDefault();
  var data = ev.dataTransfer.getData("text");
  ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

<img id="drag1" src="img_logo.gif" draggable="true" ondragstart="drag(event)" width="336" height="69">

</body>
</html>

Cela peut sembler compliqué, mais passons en revue toutes les différentes parties d'un événement de glisser-déposer.



Rendre un élément déplaçable

Tout d'abord : pour rendre un élément déplaçable, définissez l' draggableattribut sur true :

<img draggable="true">

Que faire glisser - ondragstart et setData()

Ensuite, spécifiez ce qui doit se passer lorsque l'élément est déplacé.

Dans l'exemple ci-dessus, l' ondragstartattribut appelle une fonction, drag(event), qui spécifie les données à faire glisser.

La dataTransfer.setData()méthode définit le type de données et la valeur des données glissées :

function drag(ev) {
  ev.dataTransfer.setData("text", ev.target.id);
}

Dans ce cas, le type de données est "texte" et la valeur est l'identifiant de l'élément déplaçable ("drag1").


Où déposer - ondragover

L' ondragoverévénement spécifie où les données glissées peuvent être déposées.

Par défaut, les données/éléments ne peuvent pas être déposés dans d'autres éléments. Pour autoriser un drop, il faut empêcher la gestion par défaut de l'élément.

Cela se fait en appelant la event.preventDefault()méthode pour l'événement ondragover :

event.preventDefault()

Faire le drop - ondrop

Lorsque les données glissées sont supprimées, un événement de suppression se produit.

Dans l'exemple ci-dessus, l'attribut ondrop appelle une fonction, drop(event) :

function drop(ev) {
  ev.preventDefault();
  var data = ev.dataTransfer.getData("text");
  ev.target.appendChild(document.getElementById(data));
}

Code expliqué :

  • Appelez preventDefault() pour empêcher la gestion par défaut du navigateur des données (la valeur par défaut est ouverte en tant que lien lors de la suppression)
  • Obtenez les données glissées avec la méthode dataTransfer.getData(). Cette méthode renverra toutes les données qui ont été définies sur le même type dans la méthode setData()
  • Les données glissées sont l'identifiant de l'élément glissé ("drag1")
  • Ajouter l'élément glissé dans l'élément déposé

Plus d'exemples

Exemple

Comment faire glisser (et déposer) une image entre deux éléments <div> :