Home-theater-designers
Le glisser-déposer est une fonctionnalité essentielle qui améliore l’interaction utilisateur et facilite une expérience utilisateur transparente. Que vous cherchiez à créer un outil de téléchargement de fichiers, une liste triable ou un jeu interactif, comprendre comment exploiter les capacités de cette API est une compétence cruciale à posséder dans votre boîte à outils de développement Web.
Vidéo MUO du jour DÉFILEZ POUR CONTINUER AVEC LE CONTENU
Les bases du glisser-déposer en HTML
Dans un système glisser-déposer typique, il existe deux types d'éléments : le premier type comprend des éléments déplaçables que les utilisateurs peuvent déplacer avec une souris, et le second type comprend des éléments déposables qui spécifient généralement où les utilisateurs peuvent placer un élément.
Pour implémenter le glisser-déposer, vous devez indiquer au navigateur quels éléments vous souhaitez pouvoir déplacer. Pour qu'un élément puisse être déplacé par l'utilisateur, cet élément doit avoir un déplaçable Attribut HTML mis à vrai , comme ça:
clavier sans fil avec pavé tactile pour mac
<div draggable="true">This element is draggable</div>
Lorsque l'utilisateur commence à déclencher un événement de glissement, le navigateur fournit une image « fantôme » par défaut qui fournit généralement des informations sur un élément en cours de déplacement.
Vous pouvez personnaliser cette image en fournissant votre propre image à la place. Pour ce faire, sélectionnez l'élément déplaçable dans le DOM, créez une nouvelle image pour représenter l'image de retour personnalisée et ajoutez un faites glisser le début faites glisser l'écouteur d'événement comme ceci :
let img = new Image();
img.src = 'https://upload.wikimedia.org/wikipedia/commons/thumb/9/90/Twemoji_1f600.svg/220px-Twemoji_1f600.svg.png';
document.querySelector('div').addEventListener('dragstart', (event)=>{
event.dataTransfer.setDragImage(img, 10, 10);
})
Dans le bloc de code ci-dessus, le setDragImage La méthode a trois paramètres. Le premier paramètre fait référence à l'image. Les autres paramètres représentent respectivement les décalages horizontaux et verticaux de l'image. Lorsque vous exécutez le code dans le navigateur et commencez à faire glisser un élément, vous remarquerez que l'image de déplacement personnalisée a été remplacée par l'image personnalisée définie précédemment.
Si vous souhaitez autoriser une suppression, vous devez empêcher le comportement par défaut en annulant à la fois le plus supportable et Trainer des événements, comme celui-ci :
const dropElement = document.querySelector("drop-target");
dropElement.addEventListener("dragenter", (ev) => {
ev.preventDefault();
});
dropElement.addEventListener("dragover", (ev) => {
ev.preventDefault();
});
Comprendre l'interface DragEvent
JavaScript propose un DragEvent interface qui représente une interaction glisser-déposer de la part de l'utilisateur. Vous trouverez ci-dessous une liste de types d'événements possibles sous le DragEvent interface.
- traîner : L'utilisateur déclenche cet événement en faisant glisser un élément.
- portant : Cet événement se déclenche lorsque l'opération de glisser se termine ou lorsque l'utilisateur l'interrompt. Une opération de glisser typique peut se terminer en relâchant le bouton de la souris ou en appuyant sur la touche d'échappement.
- plus supportable : Un élément glissé déclenche cet événement lorsqu'il entre dans une cible de dépôt valide.
- glisser : Lorsque l'élément glissé quitte une cible de dépôt, cet événement se déclenche.
- Trainer : Lorsque l'utilisateur fait glisser un élément déplaçable sur une cible de dépôt, l'événement se déclenche.
- faites glisser le début : L'événement se déclenche au début d'une opération de glissement.
- baisse : L'utilisateur déclenche cet événement lorsqu'il dépose un élément sur une cible de dépôt.