HTML attribut draggable

Définition et utilisation attribut draggable

HTML Les attributs globaux

L'attribut draggable spécifie si un élément est déplaçable ou non.

Astuce: Les liens et images sont déplaçables par défaut.

Astuce: L'attribut draggable est souvent utilisé dans les opérations de glisser-déplacer. Lisez notre tutoriel HTML Drag et drop pour en savoir plus.

Syntaxe

Exemple Un paragraphe draggable:

Exemple : 📋 Copier le code

  <!DOCTYPE html>
  <html>
  <head>
  <meta http-equiv="Content-Type" content="text/html;
  charset=utf-8" />
  <title></title>
  <style type="text/css">
  #div1 {width:350px;height:70px;padding:10px;border:1px solid
  #aaaaaa;}
  </style>
  <script>
  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)">
  Ce paragraphe est est draggable(déplaçable). 
  Déplacez le dans le rectangle ci haut.</p>
  <p><b>Note:</b> l'attribut draggable n'est pas
  supporté par IE et Opera.</p>
  </body>
  </html>