HTMLElement : évènement dragstart
Baseline
Widely available
Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis juillet 2015.
L'évènement dragstart de l'interface HTMLElement est déclenché lorsque l'utilisateur·ice commence à déplacer un élément ou une sélection de texte.
Cet évènement est annulable et peut se propager jusqu'aux objets Document et Window.
Syntaxe
On utilisera le nom de l'évènement dans des méthodes telles que addEventListener(), ou on définira une propriété gestionnaire d'évènements.
addEventListener("dragstart", (event) => { })
ondragstart = (event) => { }
Type d'évènement
Propriétés d'évènement
En plus des propriétés listées ci‑dessous, les propriétés de l'interface parente, Event, sont disponibles.
DragEvent.dataTransferLecture seule-
Les données transférées lors d'une interaction de glisser‑déposer.
Exemples
Définir l'opacité au démarrage du déplacement
Dans cet exemple, nous avons un élément déplaçable à l'intérieur d'un conteneur. Essayez de saisir l'élément, de le déplacer, puis de le relâcher.
Nous écoutons l'évènement dragstart pour rendre l'élément semi‑transparent pendant le déplacement.
Pour un exemple complet de glisser‑déposer, consultez la page de l'évènement drag.
HTML
<div id="container">
<div id="draggable" draggable="true">Ce div est déplaçable</div>
</div>
<div class="dropzone"></div>
CSS
body {
/* Empêche l'utilisateur·ice de sélectionner du texte dans l'exemple */
user-select: none;
}
#draggable {
text-align: center;
background: white;
}
#container {
width: 200px;
height: 20px;
background: blueviolet;
padding: 10px;
}
.dragging {
opacity: 0.5;
}
JavaScript
const source = document.getElementById("draggable");
source.addEventListener("dragstart", (event) => {
// rend l'élément semi‑transparent
event.target.classList.add("dragging");
});
source.addEventListener("dragend", (event) => {
// réinitialise la transparence
event.target.classList.remove("dragging");
});
Résultat
Spécifications
| Specification |
|---|
| HTML # handler-ondragstart |
| HTML # event-dnd-dragstart |