files/fr/web/html/attributs_universels/draggable/index.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71

---
title: draggable
slug: Web/HTML/Attributs_universels/draggable
tags:
  - Attribut
  - Attribut universel
  - HTML
  - Reference
translation_of: Web/HTML/Global_attributes/draggable
---
<div>{{HTMLSidebar("Global_attributes")}}</div>

<p>L'<a href="/fr/docs/Web/HTML/Attributs_universels">attribut universel</a> <code><strong>draggable</strong></code> est un attribut à valeur contrainte qui indique si l'élément peut être déplacé avec la souris dans un geste de glisser-déposer lorsqu'on utilise l'API <em><a href="/fr/docs/Web/API/API_HTML_Drag_and_Drop">Drag &amp; Drop</a></em> ou les fonctionnalités natives du navigateur. Les valeurs autorisées pour cet attribut sont les suivantes :</p>

<ul>
 <li><code>true</code> : qui indique que l'élément peut être déplacé à la souris</li>
 <li><code>false</code> : qui indique que l'élément ne peut pas être déplacé à la souris</li>
</ul>

<p>Si l'attribut n'est pas défini, la valeur par défaut sera <code>auto</code> : le comportement de l'élément sera celui spécifié par défaut par le navigateur.</p>

<p>Cet attribut est un attribut à valeur contrainte, ce n'est pas un attribut booléen. Il faut donc utiliser une valeur explicite <code>true</code> ou <code>false</code>. La notation raccourcie <code>&lt;img draggable&gt;</code>(utilisant uniquement le nom de l'attribut) ne fonctionnera pas :</p>

<pre class="example-bad brush: html">&lt;label draggable&gt;Label exemple&lt;/label&gt;</pre>

<p>En revanche, on pourra correctement utiliser :</p>

<pre class="example-good brush: html">&lt;label draggable="true"&gt;Label exemple&lt;/label&gt;</pre>

<p>Par défaut, seules les sélections de texte, les images et les liens peuvent être déplacés à la souris. Pour les autres éléments, il faudra définir le gestionnaire d'événements pour {{domxref('GlobalEventHandlers.ondragstart','ondragstart')}} afin de faire fonctionner le glisser-déposer. Cela est illustré <a href="/fr/docs/Glisser_et_déposer/Opérations_de_glissement">dans cet exemple</a>.</p>

<h2 id="Spécifications">Spécifications</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Spécification</th>
   <th scope="col">État</th>
   <th scope="col">Commentaires</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName("HTML WHATWG", "interaction.html#the-draggable-attribute", "draggable")}}</td>
   <td>{{Spec2("HTML WHATWG")}}</td>
   <td>Aucune modification depuis la dernière dérivation de {{SpecName('HTML5.1')}}</td>
  </tr>
  <tr>
   <td>{{SpecName("HTML5.2", "interaction.html#the-draggable-attribute", "draggable")}}</td>
   <td>{{Spec2("HTML5.2")}}</td>
   <td>Aucune modification</td>
  </tr>
  <tr>
   <td>{{SpecName("HTML5.1", "editing.html#the-draggable-attribute", "draggable")}}</td>
   <td>{{Spec2("HTML5.1")}}</td>
   <td>Dérivation de {{SpecName('HTML WHATWG')}}, définition initiale.</td>
  </tr>
 </tbody>
</table>

<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>

<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>

<p>{{Compat("html.global_attributes.draggable")}}</p>

<h2 id="Voir_aussi">Voir aussi</h2>

<ul>
 <li><a href="/fr/docs/Web/HTML/Attributs_universels">Les différents attributs universels</a></li>
</ul>