HTML L’attribut draggable

.......................

Somaire

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.

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

lampeAstuce: 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

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


Exemple Un paragraphe draggable:


Sélectionner 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>
 

Navigateurs pris en charge de L'attribut draggable

Internet Explorer Firefox Opéra Google Chrome Safari

L'attribut draggable est actuellement pris en charge dans Firefox, Chrome et Safari.


Différences entre HTML 4.01 et HTML5

L'attribut draggable est nouveau dans HTML5.


Valeurs de l'attribut draggable

Valeur Description
vrai Specifies that the element is draggable
faux Indique que l'élément à ne pas déplaçable
auto Utilise le comportement par défaut du navigateur
 Retour à la liste des attributs globaux       
accueil HTML 5
Par gerywa 20 mars 2014
  • HTML5, CSS3, JavaScript pour débutants Tome 1 HTML5, CSS3, JavaScript pour débutants Tome 1
    Premier tome d\'une série vidéo dédiée à l\'apprentissage des langages HTML, CSS et JavaScript.

    Regarder aussi nos cours :

    Balise strong

    Définit texte important

    écrire dans fichier en php

    Manipulation de fichiers écriture

    XPATH syntaxe

    XPATH syntaxe