HTML attribut d'événement ondrag

L'attribut d'événement ondrag en HTML: définition et utilisation

L'attribut d'événement ondrag est utilisé pour définir une fonction JavaScript qui sera exécutée lorsque l'élément est en cours de déplacement (drag-and-drop). Cela peut être utile pour créer des fonctionnalités interactives sur une page web.

Syntaxe générale

La syntaxe générale pour utiliser l'attribut ondrag est la suivante :

<element ondrag="maFonction(event)">

où maFonction est le nom de la fonction JavaScript que vous souhaitez exécuter lors du déplacement, et event est l'objet d'événement associé.

Paramètres

La fonction spécifiée dans ondrag peut accepter un paramètre event, qui contient des informations sur l'événement de déplacement, telles que la position actuelle de la souris.

Valeurs possibles

Les valeurs possibles pour ondrag sont des noms de fonctions JavaScript, sans les parenthèses.

Exemples pratiques d'utilisation

Voici un exemple simple qui change la couleur de fond de l'élément en cours de déplacement :

Exemple : Copier le code

<div ondrag="changeCouleur(event)" style="width: 100px; height: 100px; background-color: #3498db;">
    Faites glisser-moi !
</div>

<script>
function changeCouleur(event) {
    event.target.style.backgroundColor = "#e74c3c";
}
</script>

Expliquons le code dans l'exemple :

code HTML :

ondrag="changeCouleur(event)": Cet attribut HTML spécifie la fonction JavaScript (changeCouleur) à exécuter lorsque l'élément est en cours de glissement. L'événement event est passé à la fonction.

draggable="true" : Cet attribut HTML indique que l'élément peut être déplacé en utilisant l'API de glisser-déposer.

style="width: 100px; height: 100px; background-color: #3498db;" : Cela définit les propriétés de style initiales de l'élément, y compris la largeur, la hauteur et la couleur de fond.

JavaScript :

La fonction changeCouleur est définie en JavaScript. Cette fonction prend un argument event, qui représente l'événement de glisser-déposer.

event.target fait référence à l'élément sur lequel l'événement s'est produit, dans ce cas, le <div>.

event.target.style.backgroundColor = "#e74c3c"; modifie la propriété backgroundColor du style de l'élément pour changer sa couleur de fond en rouge (#e74c3c).

En résumé, lorsque l'utilisateur fait glisser l'élément (<div>), la fonction changeCouleur est appelée, et elle modifie la couleur de fond de l'élément en rouge. Cela crée un effet visuel dynamique lorsque l'élément est en cours de déplacement.

Astuces et conseils d'utilisation

Assurez-vous que l'élément sur lequel vous appliquez ondrag est déplaçable (par exemple, en utilisant l'attribut draggable="true").
Explorez les différentes propriétés de l'objet event pour obtenir des informations utiles sur le déplacement.
Les liens et les images sont déplaçables par défaut et n'ont pas besoin de l'attribut "déplaçable".
De nombreux attributs d'événements sont utilisés et peuvent se produire aux différentes étapes d'une opération de glisser-déposer :
Les événements déclenchés sur la cible du glissement (l'élément source) :
- ondragstart - se déclenche lorsque l'utilisateur commence à faire glisser un élément
- ondrag - se déclenche lorsqu'un élément est en train d'être déplacé
- Ondragend - se déclenche lorsque l'utilisateur a fini de faire glisser l'élément
Les événements déclenchés sur la cible de dépôt :
- ondragenter - se déclenche lorsque l'élément glissé entre dans la cible de dépôt
- ondragover - se déclenche lorsque l'élément glissé se trouve au-dessus de la cible de dépôt
- ondragleave - se déclenche lorsque l'élément glissé quitte la cible de dépôt
- ondrop - se déclenche lorsque l'élément glissé est déposé sur la cible de dépôt.

Exemple pratiques

Exemple : Copier le code

<!DOCTYPE html>
<html lang="fr">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Tutoriel : L'attribut d'événement ondrag en HTML</title>
<style>
    .zone-de-depot {
        float: left;
        width: 100px;
        height: 35px;
        margin: 15px;
        padding: 10px;
        border: 1px solid #aaaaaa;
    }
</style>

</head>
<body>

    <h1>L'attribut d'événement ondrag en HTML</h1>

<p>Faites glisser l'élément 'p' de gauche à droite ou de droite à gauche entre les deux rectangles :</p>
<div class="zone-de-depot" ondrop="deposer(event)" ondragover="autoriserDepot(event)">
  <p ondragstart="debutGlisser(event)" ondrag="enCoursDeGlisser(event)" draggable="true" id="cible-de-glissement">Glissez-moi !</p>
</div>

<div class="zone-de-depot" ondrop="deposer(event)" ondragover="autoriserDepot(event)"></div>

<p style="clear:both;" id="info"></p>

<script>
function debutGlisser(event) {
  event.dataTransfer.setData("Texte", event.target.id);
}

function enCoursDeGlisser(event) {
  document.getElementById("info").innerHTML = "L'élément 'p' est en cours de glissement";
}

function autoriserDepot(event) {
  event.preventDefault();
}

function deposer(event) {
  event.preventDefault();
  let data = event.dataTransfer.getData("Texte");
  event.target.appendChild(document.getElementById(data));
  document.getElementById("info").innerHTML = "L'élément 'p' a été déposé";
}
</script>


</body>
</html>

Ce code HTML et JavaScript implémente un système de glisser-déposer pour déplacer un élément <p> d'une zone à une autre. Voici une explication détaillée :

HTML :

1ère div (zone de dépôt) :
- class="zone-de-depot" : Cette classe est utilisée pour définir le style CSS de la première div.
- ondrop="deposer(event)" : Lorsqu'un élément est déposé dans cette zone, la fonction deposer(event) est appelée.
- ondragover="autoriserDepot(event)" : Cette fonction prévient le comportement par défaut pendant le survol pour autoriser le dépôt.
p (élément à glisser) :
- ondragstart="debutGlisser(event)" : Au début du glissement de l'élément, la fonction debutGlisser(event) est appelée.
- ondrag="enCoursDeGlisser(event)" : Cette fonction est appelée pendant le glissement.
- draggable="true" : Permet à l'élément d'être glissé.
2ème div (zone de dépôt) :
- Cette div, sans contenu, sert de deuxième zone de dépôt.
p (élément d'information) :
- style="clear:both;" : Assure que l'élément <p> est positionné sous les divs flottantes.

Script JavaScript :

Fonction debutGlisser(event) :
- Appelée au début du glissement.
- event.dataTransfer.setData("Texte", event.target.id); : Configure les données de transfert avec l'ID de l'élément glissé.
Fonction enCoursDeGlisser(event) :
- Appelée pendant le glissement.
- document.getElementById("info").innerHTML = "L'élément 'p' est en cours de glissement"; : Met à jour le contenu de l'élément d'information.
Fonction autoriserDepot(event) :
- Prévient le comportement par défaut pendant le survol pour autoriser le dépôt.
Fonction deposer(event) :
- Appelée lorsqu'un élément est déposé dans la zone de dépôt.
- let data = event.dataTransfer.getData("Texte"); : Récupère les données de transfert (ID de l'élément glissé).
- event.target.appendChild(document.getElementById(data)); : Ajoute l'élément glissé à la zone de dépôt actuelle.
- document.getElementById("info").innerHTML = "L'élément 'p' a été déposé"; : Met à jour l'information sur le dépôt.

En utilisant l'attribut ondrag, vous pouvez rendre vos pages web plus interactives en permettant aux utilisateurs de faire glisser des éléments et d'interagir avec votre contenu de manière nouvelle et engageante.