Attribut draggable HTML

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

html

<tag draggable="true|false|auto"></tag>

Exemple de l'attribut HTML draggable :

Exemple de l'attribut HTML draggable

html

<!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.

Try it Yourself »

Pratique

Qu'est-ce qui est vrai concernant l'attribut HTML draggable ?

Il est utilisé pour spécifier si l'utilisateur est autorisé à glisser un élémentSes valeurs possibles sont ‘auto', ‘false' et ‘true'.Par défaut, l'attribut draggable n'est pas défini sur la plupart des éléments, à l'exception des liens et des imagesIl n'est pas possible de rendre n'importe quel élément HTML glisser-déposable, à l'exception des liens et des imagesL'attribut draggable est une fonctionnalité HTML obsolète

Attribut draggable HTML ​

Syntaxe ​

Exemple de l'attribut HTML draggable : ​

Pratique ​

Attribut draggable HTML

Syntaxe

Exemple de l'attribut HTML draggable :

Pratique