Introduction
Le Drag and Drop (dnd) ou glisser-déposer est la dernière fonctionnalité bien connue pour la saisie manuelle dans les pages Web, en raison de son modèle fonctionnel pratique. La méthode du glisser-déposer peut être décrite comme le processus par lequel un utilisateur sélectionne une donnée ou une option spécifique dans la liste des éléments du champ source, la fait glisser et la dépose dans le champ de destination. Cette méthode est mise en œuvre à l'aide du modèle d'objet de document et de plusieurs événements de souris de la page Web HTML. Les différents événements utilisés dans cette fonctionnalité sont les suivants : glisser ou drag, glisser-départ ou dragstart, glisser-retour ou dragleave, glisser-croiser ou dragenter, glisser-sur ou dragover, déposer ou drop, glisser-fin ou dragend et glisser-sortir ou drag exit.
Événements pour le glisser-déposer
De nombreux événements sont inclus dans la dernière fonctionnalité du glisser-déposer ; voyons-les un par un comme suit :
| No | Événements | Description |
| 1 | Drag | Pour faire glisser une entité (élément ou texte) lorsque la souris est déplacée avec l'élément à faire glisser. |
| 2 | Dragstart | La toute première étape du glisser-déposer est le dragstart. Elle est exécutée lorsque l'utilisateur commence à faire glisser l'objet à l'endroit voulu. |
| 3 | Dragenter | L'événement Dragenter est utilisé lorsque la souris est en train de survoler l'élément cible. |
| 4 | Dragleave | Cet événement est utilisé lorsque l'utilisateur relâche la souris d'un élément. |
| 5 | Dragover | Cet événement se produit lorsqu'une souris est utilisée pour survoler un élément. |
| 6 | Drop | Cet événement est utilisé à la fin du processus du glisser-déposer pour l'opération de dépôt de l'élément. |
| 7 | Dragend | C'est l'une des étapes les plus importantes de ce processus, car elle permet de relâcher le bouton de la souris de l'élément pour terminer la procédure de déplacement. |
| 8 | Dragexit | Cet événement indique que l'élément n'est plus sur le processus de déplacement de la sélection de cible urgente de l'élément. |
Voyons quelques attributs de données sur lesquels l'opération de glisser-déposer va se produire :
1. dataTransfer.dropEffect [ = value ] : Cet attribut est utilisé pour montrer quelle opération est en cours. On peut le définir pour remplacer l'opération déjà sélectionnée. Les valeurs incluses dans cet attribut sont les suivantes : copy, link, none or move.
2. dataTransfer.effectAllowed [ = value ] : Toutes les opérations autorisées seront renvoyées par cet attribut. Il est également possible de définir la modification d'une opération déjà sélectionnée.
3. dataTransfer.files : Cet attribut de données est utilisé pour obtenir la fileList des fichiers qui vont être glissés.
4. dataTransfer.addElement(element) : Il est utilisé pour insérer l'élément déjà existant dans une liste d'autres éléments qui sont utiles pour rendre le retour d'information du glisser.
5. dataTransfer.setDragImage(element, x, y) : Cet attribut est un peu le même que le précédent pour la mise à jour du retour d'information et aide à modifier le retour d'information déjà existant.
6. dataTransfer.clearData ( [ format ] ) : Il aide l'utilisateur à supprimer les données du format déjà défini. Si l'utilisateur omet l'argument, toutes les données seront supprimées.
7. dataTransfer.setData(format, data) : C'est l'un des attributs populaires utilisés pour ajouter des données spécifiées.
8. data = dataTransfer.getData(format) : Cet attribut dans l'opération du glisser-déposer est utilisé pour extraire les données spécifiées. S'il n'y a pas de données identiques, il retournera à la chaîne vide.
Syntaxe du glisser-déposer en HTML
Voici quelques étapes définissant la syntaxe du glisser-déposer :
Sélectionner l'objet qui sera un drag (l'élément qui sera glissé) : lui attribuer l'attribut true.
<element draggable="true">
Commencer à faire glisser l'objet :
function dragStart(ev){}
Déposer l'objet :
function dragDrop(ev){}
Exemples d'implémentation de glisser-déposer en HTML
L'exemple suivant montre comment fonctionne exactement l'opération de glisser-déposer en HTML :
Exemple 1
Code :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Drag and Drop Démo</title>
<script>
function allowDrop(ev) {
ev.preventDefault();
}
function dragStart(ev) {
ev.dataTransfer.setData("text", ev.target.id);
}
function dragDrop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
}
</script>
<style>
#box {
margin: auto;
width: 30%;
width: 21%;
height:150px;
border: 5px solid blue;
padding: 2px;
}
#square1, #square2, #square3 {
float: left;
margin: 5px;
padding: 10px;
}
#square1 {
width: 30px;
height: 30px;
background-color: yellowgreen;
}
#square2 {
width: 60px;
height: 60px;
background-color: darkblue;
}
#square3 {
width: 90px;
height: 90px;
background-color:darkred ;
}
h2 {
font-size:20px;
font-weight:bold;
text-align:center;
}
</style>
</head>
<body>
<h2>DÉMO DU GLISSER-DÉPOSER EN HTML</h2>
<div id = "box">
<div id="square1" draggable="true"ondragstart="dragStart(event)"></div>
<div id="square2" draggable="true"ondragstart="dragStart(event)"></div>
<div id="square3" ondrop="dragDrop(event)" ondragover="allowDrop(event)"></div>
</div>
</body>
</html>
Résultat : Avant le glisser-déposer, le résultat sera le suivant :
Après avoir effectué l'opération du glisser-déposer, le résultat sera le suivant :
