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. Windows Internet Explorer 9 et les versions antérieures de Windows Internet Explorer prennent en charge l’objet DataTransfer et des événements pour faire glisser des images, des liens et du texte. Internet Explorer 10 a ajouté la prise en charge de l’attribut draggable et de la propriété DataTransfer.files, ce qui permet de gérer le glisser-déplacer d’un ou plusieurs fichiers du Bureau vers une page web.

Microsoft Edge prend désormais en charge le modèle de glisser-déplacer le plus récent du W3C, où un objet DataTransferItemList (accessible via la propriété DataTransfer.items) sert de magasin de données d’opération de glissement. Les API héritées de glisser-déplacer indiquées ci-dessus sont également toujours prises en charge. Pour plus d’informations, voir Modèles de glisser-déplacer nouveau et hérité.

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 (le texte, les liens et les images sont déplaçables, d’autres éléments ne le sont pas).

 

Ainsi, l’exemple de code ci-après 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. Comme l’attribut draggable n’est pas hérité, les enfants d’un élément ne sont pas automatiquement déplaçables.

Attribut files de l’objet DataTransfer

L’ajout de l’attribut files à l’objet DataTransfer vous permet de faire glisser 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.items
DataTransferItem
DataTransferItemList
DataTransfer
DragEvent
draggable

Démonstrations du site Internet Explorer Test Drive

Magnetic Poetry

Billets IEBlog

IE11 : navigation tactile pour le web d’aujourd’hui et de demain
Glisser-déplacer HTML5 dans IE10 PPB2

Spécification

HTML 5.1 : section 5.7

 

 

Afficher: