HTML - API de glisser-déposer

Définition des zones de dépôt

Pour définir un élément comme zone de dépôt, vous n'avez pas besoin de définir d'attributs spéciaux. Au lieu de cela, vous gérez les événements dragover et drop sur l'élément. L'événement dragover se déclenche continuellement lorsqu'un élément déplaçable est glissé sur une zone de dépôt, et l'événement drop se déclenche lorsque l'élément déplaçable est relâché sur la zone de dépôt.

Pour permettre à un élément d'accepter les dépôts, vous devez annuler le comportement par défaut de l'événement dragover en appelant event.preventDefault(). Cela est nécessaire car, par défaut, les éléments n'autorisent pas les dépôts.

<div id="drop-zone">
  Déposez les éléments ici
</div>

const dropZone = document.getElementById('drop-zone');

dropZone.addEventListener('dragover', function(event) {
  event.preventDefault();
});

Gestion de l'événement dragover

L'événement dragover est déclenché continuellement lorsqu'un élément déplaçable est glissé sur une zone de dépôt. Vous pouvez utiliser cet événement pour fournir un retour visuel à l'utilisateur, indiquant que la zone de dépôt est prête à accepter l'élément déplaçable.

dropZone.addEventListener('dragover', function(event) {
  event.preventDefault();
  event.target.classList.add('drag-over');
});

dropZone.addEventListener('dragleave', function(event) {
  event.target.classList.remove('drag-over');
});

Dans l'exemple ci-dessus, nous ajoutons une classe CSS drag-over à l'élément de la zone de dépôt lorsque l'événement dragover est déclenché. Cette classe peut être utilisée pour mettre visuellement en évidence la zone de dépôt. Nous gérons également l'événement dragleave pour supprimer la classe lorsque l'élément déplaçable quitte la zone de dépôt.

Gestion de l'événement drop

L'événement drop est déclenché lorsqu'un élément déplaçable est relâché sur une zone de dépôt. C'est là que vous récupérez les données en cours de glissement et effectuez les actions nécessaires.

dropZone.addEventListener('drop', function(event) {
  event.preventDefault();
  const draggedData = event.dataTransfer.getData('text/plain');
  event.target.appendChild(document.getElementById(draggedData));
  event.target.classList.remove('drag-over');
});

Dans l'écouteur d'événements drop, nous annulons d'abord le comportement par défaut en utilisant event.preventDefault(). Ensuite, nous récupérons les données qui ont été définies lors de l'événement dragstart en utilisant event.dataTransfer.getData(). Dans cet exemple, nous nous attendons à ce que les données soient l'ID de l'élément déplaçable.

Enfin, nous ajoutons l'élément déplaçable à la zone de dépôt en utilisant event.target.appendChild() et retirons la classe drag-over de la zone de dépôt.

Récupération des données de glissement

Pour récupérer les données en cours de glissement, vous utilisez la méthode dataTransfer.getData() à l'intérieur de l'écouteur d'événements drop. Cette méthode prend le type de données comme argument et renvoie les données correspondantes qui ont été définies lors de l'événement dragstart.

const draggedData = event.dataTransfer.getData('text/plain');

Dans cet exemple, nous récupérons les données de type 'text/plain' qui ont été définies dans l'événement dragstart en utilisant event.dataTransfer.setData('text/plain', event.target.id).

En définissant des zones de dépôt, en gérant les événements dragover et drop, et en récupérant les données de glissement, vous pouvez créer des expériences interactives où les utilisateurs peuvent déposer des éléments déplaçables sur des zones spécifiques de votre page web.

Styliser les éléments déplaçables

Pour faire ressortir les éléments déplaçables et montrer clairement qu'ils peuvent être manipulés, vous pouvez leur appliquer des styles CSS. Voici quelques techniques de stylisation courantes :

.draggable {
  cursor: move;
  background-color: #f0f0f0;
  border: 2px solid #999;
  padding: 10px;
  margin-bottom: 10px;
}

.draggable:hover {
  background-color: #e0e0e0;
  border-color: #666;
}

La classe .draggable est appliquée aux éléments déplaçables. La propriété cursor est définie sur move pour afficher un curseur de déplacement lorsque vous survolez l'élément. Les propriétés background-color, border, padding et margin-bottom sont utilisées pour séparer visuellement les éléments déplaçables des autres contenus.

La pseudo-classe :hover est utilisée pour changer la couleur de fond et la couleur de la bordure lorsque vous survolez l'élément déplaçable, fournissant un retour visuel indiquant que l'élément est interactif.

Afficher les zones de dépôt valides

Lorsqu'un élément déplaçable est en cours de glissement, il est utile de montrer quelles zones de dépôt sont des cibles valides pour déposer l'élément. Vous pouvez le faire en appliquant des styles aux zones de dépôt en fonction de l'état du glissement.

.drop-zone {
  border: 2px dashed #ccc;
  padding: 20px;
  text-align: center;
  color: #999;
}

.drop-zone.drag-over {
  border-color: #666;
  background-color: #f0f0f0;
  color: #333;
}

La classe .drop-zone définit les styles de base pour les zones de dépôt. La propriété border est définie sur une ligne pointillée pour séparer visuellement la zone de dépôt. Les propriétés padding, text-align et color sont utilisées pour styliser l'apparence de la zone de dépôt.

La classe .drag-over est ajoutée à la zone de dépôt lorsqu'un élément déplaçable est glissé au-dessus. Cette classe change la couleur de la bordure, la couleur de fond et la couleur du texte pour montrer que la zone de dépôt est une cible valide pour déposer l'élément.

Donner des indices visuels pendant les opérations de glissement

Pendant l'opération de glissement, vous pouvez donner des indices visuels supplémentaires pour guider l'utilisateur et fournir un retour sur l'état actuel du glissement. Voici quelques exemples :

Vous pouvez réaliser ces indices visuels en modifiant dynamiquement les styles de l'élément déplaçable et des zones de dépôt à l'aide de JavaScript pendant les événements de glissement.

draggableItem.addEventListener('dragstart', function(event) {
  event.target.style.opacity = '0.5';
});

draggableItem.addEventListener('dragend', function(event) {
  event.target.style.opacity = '1';
});

dropZone.addEventListener('dragover', function(event) {
  event.preventDefault();
  event.target.classList.add('drag-over');
});

dropZone.addEventListener('dragleave', function(event) {
  event.target.classList.remove('drag-over');
});

L'opacité de l'élément déplaçable est réduite à 0.5 lorsque l'événement dragstart est déclenché, montrant qu'il est en cours de glissement. Lorsque l'événement dragend est déclenché, l'opacité est rétablie à 1.

L'écouteur d'événement dragover ajoute la classe drag-over à la zone de dépôt lorsque l'élément déplaçable est glissé au-dessus, donnant un retour visuel indiquant qu'il s'agit d'une cible de dépôt valide. L'écouteur d'événement dragleave supprime la classe lorsque l'élément déplaçable quitte la zone de dépôt.

En appliquant des styles aux éléments déplaçables, en affichant les zones de dépôt valides et en donnant des indices visuels pendant l'opération de glissement, vous pouvez créer une expérience de glisser-déposer plus intuitive et engageante pour vos utilisateurs.

Glisser-déposer avec des images

Vous pouvez faire glisser et déposer des images dans une page web ou entre différentes applications. Pour activer le glisser-déposer d'images, vous devez définir l'attribut draggable sur l'élément <img> :

<img src="chemin/vers/image.jpg" alt="Image glissable" draggable="true">

Lorsque vous commencez à faire glisser une image, vous pouvez accéder aux données de l'image dans l'événement dragstart en utilisant la méthode dataTransfer.setData() :

const imageGlissable = document.querySelector('img');

imageGlissable.addEventListener('dragstart', function(event) {
  event.dataTransfer.setData('text/plain', event.target.src);
  event.dataTransfer.effectAllowed = 'copy';
});

Dans l'exemple ci-dessus, nous définissons l'URL source de l'image comme données de glissement et spécifions la propriété effectAllowed pour indiquer que l'image peut être copiée.

Pour gérer le dépôt d'une image dans une zone de dépôt, vous pouvez obtenir l'URL de l'image à partir de l'événement drop et créer un nouvel élément <img> :

zoneDepot.addEventListener('drop', function(event) {
  event.preventDefault();
  const urlImage = event.dataTransfer.getData('text/plain');
  const nouvelleImage = document.createElement('img');
  nouvelleImage.src = urlImage;
  event.target.appendChild(nouvelleImage);
});

Glisser-déposer avec des fichiers

L'API Drag & Drop prend également en charge le glisser-déposer de fichiers depuis l'ordinateur de l'utilisateur vers une page web. Pour activer le glisser-déposer de fichiers, vous devez gérer l'événement drop et accéder aux fichiers déposés en utilisant la propriété event.dataTransfer.files.

zoneDepot.addEventListener('drop', function(event) {
  event.preventDefault();
  const fichiers = event.dataTransfer.files;
  for (let i = 0; i < fichiers.length; i++) {
    const fichier = fichiers[i];
    // Traiter le fichier déposé
  }
});

Dans l'exemple ci-dessus, nous obtenons les fichiers déposés à partir de la propriété event.dataTransfer.files, qui est un objet FileList. Vous pouvez ensuite parcourir les fichiers et les traiter selon vos besoins, comme les télécharger sur un serveur ou lire leur contenu.

Glisser-déposer entre fenêtres

L'API Drag & Drop vous permet d'effectuer des opérations de glisser-déposer entre différentes fenêtres ou onglets du navigateur. Pour activer le glisser-déposer entre fenêtres, vous devez définir la propriété effectAllowed sur 'copy' dans l'événement dragstart et gérer l'événement drop dans la fenêtre cible.

// Fenêtre source
elementGlissable.addEventListener('dragstart', function(event) {
  event.dataTransfer.setData('text/plain', 'Bonjour depuis une autre fenêtre !');
  event.dataTransfer.effectAllowed = 'copy';
});

// Fenêtre cible
zoneDepot.addEventListener('drop', function(event) {
  event.preventDefault();
  const donnees = event.dataTransfer.getData('text/plain');
  console.log('Données reçues :', donnees);
});

Dans la fenêtre source, nous définissons les données à faire glisser et spécifions effectAllowed comme 'copy'. Dans la fenêtre cible, nous gérons l'événement drop et obtenons les données glissées en utilisant event.dataTransfer.getData().

Glisser-déposer avec des éléments personnalisés

Vous pouvez créer vos propres éléments personnalisés qui prennent en charge la fonctionnalité de glisser-déposer. Pour ce faire, vous définissez un élément personnalisé et ajoutez des écouteurs d'événements pour les événements de glisser-déposer.

class ElementGlissable extends HTMLElement {
  constructor() {
    super();
    this.draggable = true;
    this.addEventListener('dragstart', this.gererDebutGlissement);
  }

  gererDebutGlissement(event) {
    event.dataTransfer.setData('text/plain', this.innerHTML);
    event.dataTransfer.effectAllowed = 'move';
  }
}

customElements.define('element-glissable', ElementGlissable);

Dans l'exemple ci-dessus, nous définissons un élément personnalisé appelé <element-glissable> qui étend la classe HTMLElement. Nous définissons la propriété draggable sur true et ajoutons un écouteur d'événement dragstart. La méthode gererDebutGlissement définit les données à faire glisser et spécifie effectAllowed comme 'move'.

Vous pouvez ensuite utiliser l'élément personnalisé dans votre HTML :

<element-glissable>Faites-moi glisser !</element-glissable>

En créant des éléments personnalisés avec prise en charge du glisser-déposer, vous pouvez construire des composants réutilisables qui peuvent être facilement intégrés dans vos applications web.

Ces techniques avancées montrent la flexibilité et la puissance de l'API Drag & Drop. Que vous travailliez avec des images, des fichiers, du glisser-déposer entre fenêtres ou des éléments personnalisés, vous pouvez créer des expériences interactives et captivantes pour vos utilisateurs.

Réorganisation des éléments de liste

Un cas d'utilisation courant de l'API Drag & Drop est la réorganisation des éléments de liste. Vous pouvez permettre aux utilisateurs de faire glisser et déposer des éléments de liste pour modifier leur ordre.

<ul id="item-list">
  <li draggable="true">Élément 1</li>
  <li draggable="true">Élément 2</li>
  <li draggable="true">Élément 3</li>
  <li draggable="true">Élément 4</li>
</ul>

const list = document.getElementById('item-list');

list.addEventListener('dragstart', function(event) {
  event.dataTransfer.setData('text/plain', event.target.innerHTML);
});

list.addEventListener('dragover', function(event) {
  event.preventDefault();
});

list.addEventListener('drop', function(event) {
  event.preventDefault();
  const draggedItem = event.dataTransfer.getData('text/plain');
  const dropTarget = event.target;
  if (dropTarget.tagName === 'LI') {
    dropTarget.insertAdjacentHTML('beforebegin', `<li draggable="true">${draggedItem}</li>`);
    event.dataTransfer.clearData();
  }
});

Nous avons un élément <ul> avec des éléments <li> qui ont l'attribut draggable défini sur true. Nous ajoutons un écouteur d'événement dragstart à la liste pour définir les données en cours de glissement. Sur l'événement dragover, nous appelons event.preventDefault() pour permettre le dépôt. Dans l'écouteur d'événement drop, nous récupérons les données glissées, créons un nouvel élément <li> avec le contenu glissé, et l'insérons avant la cible de dépôt.

Déplacement d'éléments entre conteneurs

Un autre cas d'utilisation est le déplacement d'éléments entre différents conteneurs. Vous pourriez avoir deux listes, et vous voulez permettre aux utilisateurs de déplacer des éléments d'une liste à l'autre.

<div id="container1">
  <p draggable="true">Élément 1</p>
  <p draggable="true">Élément 2</p>
</div>
<div id="container2"></div>

const container1 = document.getElementById('container1');
const container2 = document.getElementById('container2');

container1.addEventListener('dragstart', function(event) {
  event.dataTransfer.setData('text/plain', event.target.innerHTML);
});

container2.addEventListener('dragover', function(event) {
  event.preventDefault();
});

container2.addEventListener('drop', function(event) {
  event.preventDefault();
  const draggedItem = event.dataTransfer.getData('text/plain');
  event.target.innerHTML += `<p draggable="true">${draggedItem}</p>`;
  event.dataTransfer.clearData();
});

Nous avons deux éléments <div> représentant les conteneurs. Le premier conteneur a des éléments <p> avec l'attribut draggable défini sur true. Nous ajoutons un écouteur d'événement dragstart au premier conteneur pour définir les données en cours de glissement. Le deuxième conteneur a des écouteurs d'événements dragover et drop. Lors de l'événement drop, nous récupérons les données glissées, créons un nouvel élément <p>, et l'ajoutons au deuxième conteneur.

Téléchargement de fichiers par glisser-déposer

Vous pouvez utiliser l'API Drag & Drop pour permettre aux utilisateurs de télécharger des fichiers en les faisant glisser et en les déposant sur une zone désignée.

<div id="drop-zone">
  Déposez les fichiers ici pour les télécharger
</div>

const dropZone = document.getElementById('drop-zone');

dropZone.addEventListener('dragover', function(event) {
  event.preventDefault();
});

dropZone.addEventListener('drop', function(event) {
  event.preventDefault();
  const files = event.dataTransfer.files;
  for (let i = 0; i < files.length; i++) {
    const file = files[i];
    const formData = new FormData();
    formData.append('file', file);
    fetch('/upload', {
      method: 'POST',
      body: formData
    });
  }
});

Nous avons un élément <div> représentant la zone de dépôt. Nous ajoutons des écouteurs d'événements dragover et drop à la zone de dépôt. Lors de l'événement drop, nous récupérons les fichiers déposés depuis event.dataTransfer.files, créons un objet FormData pour chaque fichier, et envoyons une requête POST au serveur pour télécharger le fichier.

Création de jeux de puzzle interactifs

L'API Drag & Drop peut être utilisée pour créer des jeux de puzzle interactifs où les utilisateurs font glisser et déposent des pièces de puzzle pour résoudre le puzzle.

<div id="puzzle-container">
  <div class="puzzle-piece" draggable="true"></div>
  <div class="puzzle-piece" draggable="true"></div>
  <div class="puzzle-piece" draggable="true"></div>
  <div class="puzzle-piece" draggable="true"></div>
</div>

const puzzleContainer = document.getElementById('puzzle-container');
const puzzlePieces = document.querySelectorAll('.puzzle-piece');

puzzlePieces.forEach(piece => {
  piece.addEventListener('dragstart', function(event) {
    event.dataTransfer.setData('text/plain', event.target.innerHTML);
  });
});

puzzleContainer.addEventListener('dragover', function(event) {
  event.preventDefault();
});

puzzleContainer.addEventListener('drop', function(event) {
  event.preventDefault();
  const draggedPiece = event.dataTransfer.getData('text/plain');
  const dropTarget = event.target;
  if (dropTarget.classList.contains('puzzle-piece')) {
    const temp = dropTarget.innerHTML;
    dropTarget.innerHTML = draggedPiece;
    event.dataTransfer.setData('text/plain', temp);
  }
});

Nous avons un élément <div> représentant le conteneur du puzzle et des éléments <div> représentant les pièces du puzzle. Chaque pièce de puzzle a l'attribut draggable défini sur true. Nous ajoutons un écouteur d'événement dragstart à chaque pièce de puzzle pour définir les données en cours de glissement. Le conteneur du puzzle a des écouteurs d'événements dragover et drop. Lors de l'événement drop, nous récupérons la pièce glissée et la cible de dépôt et échangeons leur contenu.

Ces exemples montrent certaines des possibilités de l'API Drag & Drop. Vous pouvez l'utiliser pour créer des expériences interactives, gérer les téléchargements de fichiers, créer des jeux, et plus encore. L'API offre une manière flexible et intuitive d'implémenter la fonctionnalité de glisser-déposer dans les applications web.