HTML 5 Drag and Drop ou Glisser et Déplacer

Le Drag and Drop (gliser et déplacer) fait désormais une partie de la norme HTML5.
LeDrag and Drop est une caractéristique très courante. C'est lorsque vous faites  glisser un objet avec la souri  vers un autre emplacement.

HTML5 Drag and Drop

HTML5 cours tutorial

En HTML5, drag and drop fait partie de la norme, et tout élément peut être déplacé.


Navigateurs pris en charge

Internet Explorer Firefox Opéra Google Chrome Safari

Internet Explorer 9, Firefox, Opera 12, Chrome et Safari 5 soutiennent le drag and drop.

Remarque: 
LeDrag and Drop ne fonctionne pas dans Safari 5.1.2.

Drag and Drop HTML5 Exemple

Exemple L'exemple ci-dessous est un simpleDrag and Drop :

Sélectionner le code

  <!DOCTYPE html>
  <html>
   
  <head>
    <meta http-equiv="X-UA-Compatible" content="IE=9"/>
    <title>HTML5  Drag and Drop </title>
   <style type="text/css">
  #div1 {width:140px;height:180px;border:1px solid #aaaaaa;}
  </style>
  <script>
  function allowDrop(ev)
  {
  ev.preventDefault();
  }
   
  function drag(ev)
  {
  ev.dataTransfer.setData("Text",ev.target.id);
  }
   
  function drop(ev)
  {
  ev.preventDefault();
  var data=ev.dataTransfer.getData("Text");
  ev.target.appendChild(document.getElementById(data));
  }
  </script>
  </head>
  <body>
   
  <p>Déplacer l'image Apprendre dans le rectangle :</p>
   
  <div id="div1" ondrop="drop(event)"
  ondragover="allowDrop(event)"></div>
  <br>
  <img id="drag1"
  src="http://www.oujood.com/images/apprendre.png"
  draggable="true" ondragstart="drag(event)" width="140"
  height="180">
   
  </body>
  </html>
 

Faire un élément Glissant

Tout d'abord: Pour faire un élément déplaçable, définissez l'attribut draggable sur true:

<img draggable="true">


Qu’est ce qui doit être Glissé - ondragstart et setData ()

Ensuite, spécifier ce qui doit arriver lorsque l'élément est déplacé.

Dans l'exemple ci-dessus, l'attribut ondragstart appelle une fonction, drag(évent), qui spécifie les données à faire glisser.

Le dataTransfer.setData() dans le script et une méthode qui définit le type de données et la valeur des données glissées:

Sélectionner le code

  function drag(ev)
  {
  ev.dataTransfer.setData("Text",ev.target.id);
  }
 

Dans ce cas, le type de données est "texte" et la valeur est l'identifiant de l'élément déplaçable qui est l’id ("drag1").


Où doit être déplacé - onDragOver

L'événement ondragover spécifie où les données glissées peuvent être déposés.

Par défaut, les données / éléments ne peuvent pas être déposés dans d'autres éléments. Afin de permettre une goutte, il faut éviter le traitement par défaut de l'élément.

Ceci est fait en appelant la event.preventDefault () méthode pour l'événement ondragover:

ev.preventDefault()


Faites le Drop - ondrop

Lorsque les données glissé sont déposées, un événement ondrop se produit.

Dans l'exemple ci-dessus, l'attribut ondrop appelle une fonction, drop(event):

Sélectionner le code

  function drop(ev)
  {
  ev.preventDefault();
  var data=ev.dataTransfer.getData("Text");
  ev.target.appendChild(document.getElementById(data));
  }
 
  • Appelez preventDefault() pour éviter que navigateur fait la manipulation par défaut des données
  • Obtenir les données glissées avec la méthode dataTransfer.getData ("Texte"). Cette méthode va retourner les données qui ont été fixés au même type dans la méthode setData ()
  • Les données glissées est  l'élément  avec l’id ("drag1")
  • Ajout de l'élément entraîné dans l'élément de chute.

Exemple Comment faire glisser et déplacer une image entre deux éléments dans les deux sens.

Sélectionner le code

  <!DOCTYPE html>
  <html>
  <head>
    <meta http-equiv="X-UA-Compatible" content="IE=9"/>
    <title>HTML5  l’élément SVG</title>
   <style type="text/css">
  #div1, #div2
  {float:left; width:140px; height:180px;
  margin:10px;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)
  {
  ev.preventDefault();
  var data=ev.dataTransfer.getData("Text");
  ev.target.appendChild(document.getElementById(data));
  }
  </script>
  </head>
  <body>
   
  <div id="div1" ondrop="drop(event)"
  ondragover="allowDrop(event)">
    <img
  src="http://www.oujood.com/images/apprendre.png"
  draggable="true" ondragstart="drag(event)" id="drag1"
  width="140"></div>
  <div id="div2" ondrop="drop(event)"
  ondragover="allowDrop(event)"></div>
   
  </body>
  </html>
 
Par carabde 10 juin 2014

chapitre précédent

sommaire

chapitre suivant