Exporter (0) Imprimer
Développer tout

Glisser-déplacer

Le glisser-déplacer est une fonctionnalité que les utilisateurs d’ordinateur tiennent pour acquise et il existe plusieurs façons de l’activer dans le navigateur. Internet Explorer 9 et les versions antérieures de Windows Internet Explorer prennent en charge l’objet dataTransfer et des événements pour déplacer des images, des liens et du texte. Internet Explorer 10 ajoute la prise en charge de l’attribut draggable, qui permet à tout élément HTML auquel vous l’appliquez d’être déplacé sur la page. Internet Explorer 10 ajoute aussi l’attribut files à l’objet dataTransfer, qui permet la prise en charge du glisser-déplacer d’un ou de plusieurs fichiers du Bureau vers une page Web.

Attribut draggable

L’attribut draggable vous permet de déplacer n’importe quel élément HTML sur la page. Il indique les états suivants.

Mot cléDescription

true

Le contenu peut être déplacé.

false

Le contenu ne peut pas être déplacé.

auto

Le contenu adopte le comportement par défaut du navigateur (texte, liens et images sont déplaçables, d’autres éléments ne le sont pas).

 

Par exemple, l’exemple de code suivant permet à l’utilisateur de déplacer des éléments dans l’écran.


<button id="mybutton" draggable="true">Drag me</button>
<img src="photo.png" draggable="true" />
<div id="mydiv" draggable="true">Moveable text</div>


Lorsqu’un utilisateur déplace un élément déplaçable, Internet Explorer 10 affiche une image fantôme qui bouge avec le curseur. L’attribut draggable n’est pas hérité, par conséquent, les enfants d’un élément ne sont pas automatiquement déplaçables.

Attribut files pour l’objet dataTransfer

L’ajout de l’attribut files à l’objet dataTransfer vous permet de déplacer des fichiers depuis des dossiers ou votre Bureau vers une page Web. Cela permet de simplifier la création de programmes, par exemple, un client de messagerie dans lequel vous pouvez joindre des documents à un message ou ajouter des photos à une galerie.

L’écouteur d’événements et la fonction "dropHandler" montrent comment créer une zone dans laquelle l’utilisateur peut placer un fichier. Cette « zone de dépôt » peut être un div, un img ou un autre élément sur la page. Les événements dragover et drop utilisent la fonction "doNothing" pour empêcher la manipulation et la propagation par défaut de l’événement, ce qui risquerait de produire des résultats imprévisibles.


// this function runs when the page loads to set up the drop area
function init() 
{
  // Set the drop-event handlers.
  var dropArea = document.getElementById("dropspot");
  dropArea.addEventListener("drop", dropHandler, false);
  dropArea.addEventListener("dragover", doNothing, false);
}
function dropHandler(event)
{
  // Use our doNothing() function to prevent default processing. 
  doNothing(event);
  // Get the file(s) that are dropped.
  var filelist =  event.dataTransfer.files;
  if (!filelist) return;  // if null, exit now
  var filecount = filelist.length;  // get number of dropped files

  if (filecount > 0) 
  {
    // Do something with the files.         
  } 
}
// Prevents the event from continuing so our handlers can process the event.
function doNothing(event)
{
  event.stopPropagation();
  event.preventDefault();
}


Informations de référence sur les API

dataTransfer
DragEvent
draggable

Exemples et didacticiels

Exemple de glisser-déplacer HTML5

Démonstrations du site Internet Explorer Test Drive

Magnetic Poetry

Billets IEBlog

Glisser-déplacer HTML5 dans IE10 PPB2

Spécification

HTML5: Section 7.7

 

 

Microsoft réalise une enquête en ligne pour recueillir votre opinion sur le site Web de MSDN. Si vous choisissez d’y participer, cette enquête en ligne vous sera présentée lorsque vous quitterez le site Web de MSDN.

Si vous souhaitez y participer,
Afficher:
© 2014 Microsoft