Attribut draggable HTML
The HTML draggable attribute is an enumerated attribute and specifies whether the element is draggable or not. Read and see on what elements it can be used.
L'attribut HTML draggable est un attribut énuméré qui indique si l'élément peut être déplacé par glisser-déposer ou non (que ce soit via le comportement natif du navigateur ou l'API HTML Drag and Drop). Cet attribut est couramment utilisé dans les opérations de glisser-déposer.
Les images et les liens sont glisser-déposables par défaut. Pour les autres éléments, vous devez définir le gestionnaire d'événements ondragstart pour initier le glissement et utiliser event.dataTransfer. Vous pouvez également utiliser draggable="false" pour désactiver explicitement le glissement des images et des liens.
Vous pouvez utiliser cet attribut sur n'importe quel élément HTML. Il fait partie des Attributs globaux.
L'attribut draggable peut prendre les valeurs suivantes :
true: l'élément peut être glisser-déposable.false: l'élément ne peut pas être glisser-déposable.auto: le glissement suit le comportement par défaut du navigateur.
Syntaxe
Syntaxe de l'attribut HTML draggable
<tag draggable="true|false|auto"></tag>Exemple de l'attribut HTML draggable :
Exemple de l'attribut HTML draggable
<!DOCTYPE HTML>
<html>
<head>
<title>Title of the document</title>
<style>
#rectId {
width: 350px;
height: 70px;
padding: 10px;
border: 1px solid #aaaaaa;
}
</style>
<script>
function allowDrop(event) {
event.preventDefault(); // Allow dropping
}
function drag(event) {
// Store the dragged element's ID in the dataTransfer object
event.dataTransfer.setData("Text", event.target.id);
}
function drop(event) {
var data = event.dataTransfer.getData("Text"); // Retrieve the ID
event.target.appendChild(document.getElementById(data));
event.preventDefault();
}
</script>
</head>
<body>
<div id="rectId" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br />
<p id="dragId" draggable="true" ondragstart="drag(event)">
This is a draggable paragraph. Drag this item to the rectangle.
</p>
</body>
</html>Remarque : Pour le développement moderne, il est recommandé d'utiliser addEventListener à la place des gestionnaires d'événements en ligne.
Pratique
Qu'est-ce qui est vrai concernant l'attribut HTML draggable ?