Manuel de référence HTML

Dictionnaire complet des balises HTML

Propriété draggable HTML

La propriété globale draggable est une propriété de type enumeration, utilisée pour indiquer si un élément permet ou non l'utilisation de l'API de glisser-déposer.

Les valeurs de draggable sont les suivantes :
　　　 true, ce qui signifie que l'élément peut être glissé
　　　 false, ce qui signifie que l'élément ne peut pas être glissé
Si cette propriété n'est pas définie, la valeur par défaut est auto, ce qui signifie qu'il utilise le comportement par défaut défini par le navigateur.
Cette propriété est de type enumerated, pas de type booléen. Cela signifie que vous devez spécifier explicitement la valeur true ou false, comme dans <label draggable>Example Label</label> Une telle abréviation n'est pas autorisée. L'utilisation correcte est <label draggable="true">Example Label</label>。
Par défaut, seules les textes sélectionnés, les images et les liens peuvent être glissés. Pour d'autres éléments, il est nécessaire de définir l'événement ondragstart dans l'ordre du mécanisme de glisser-déposer pour qu'ils fonctionnent correctement

Attributs globaux HTML

Exemple en ligne

Exemple démontrant un paragraphe glissant :

Exemple

!DOCTYPE　HTML>
<html>
<head>
<meta　charset="utf-8">　
<title>Base Tutorial(oldtoolbag.com)</title>
<style　type="text/css">
#div1　{width:400px;height:80px;padding:10px;border:1px　solid　red;}
</style>
<script　type="text/javascript">
function　allowDrop(ev)
{
　　　　ev.preventDefault();
}
function　drag(ev)
{
　　　　ev.dataTransfer.setData("Text",ev.target.id);
}
function　drop(ev)
{
　　　　var　data=ev.dataTransfer.getData("Text");
　　　　ev.target.appendChild(document.getElementById(data));
　　　　ev.preventDefault();
}
</script>
</head>
<body>
<div　id="div1"　ondrop="drop(event)"　ondragover="allowDrop(event)"></div>
<br　/>
<p　id="drag1"draggable="true"　ondragstart="drag(event)">Ceci est un paragraphe déplaçable. Veuillez glisser ce paragraphe dans la boîte rouge rectangulaire en haut.</p>
</body>
</html>

Voyons voir ‹/›

Compatibilité du navigateur

IEFirefoxOperaChromeSafari

Internet Explorer 9+, Firefox, Opera, Chrome et Safari navigateurs prennent en charge l'attribut draggable.

Remarque : Internet Explorer 8 et les versions IE plus anciennes ne prennent pas en charge l'attribut draggable.

Définition et utilisation

L'attribut draggable spécifie si un élément est déplacable ou non.
Astuce :Les liens et les images sont par défaut déplacables.
Astuce : L'attribut draggable est généralement utilisé dans les opérations de glisser-déposer.

HTML 4.01 par rapport à HTML5différences

L'attribut draggable est un attribut HTML5 Nouveau.

Syntaxe

　　　　 <element draggable="true|false|auto">

Valeur de l'attribut

Valeur	Description
true	Définit que l'élément est déplacable.
false	Définit que l'élément est non déplacable.
auto	Utilisez les fonctionnalités par défaut du navigateur.

Attributs globaux HTML

HTML: <template> balise