oujood.com

 HTML L’attribut draggable

L'attribut draggable spécifie si un élément est déplaçable ou non.L'attribut draggable est souvent utilisé dans les opérations de glisser-déplacer.
.......................

chercher |

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:


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>

Navigateurs pris en charge de L'attribut draggable

Internet ExplorerFirefoxOpéraGoogle ChromeSafari

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



Voir aussi nos tutoriel :

la propriété border-image

Un raccourci pour fixer toutes les propriétés de la frontière-image- *

CSS3 Plusieurs colonnes

W3C propose une nouvelle façon d'organiser le texte dans les colonnes. mise en page multi-colonne

Les variables superglobales

Les variables superglobales