Comment utiliser l'API Drag and Drop

À l'aide de l'API Drag and Drop, vous pouvez définir les éléments de la page pouvant être glissés et intercepter lorsque l'utilisateur fait glisser un élément.

Il est très bien pris en charge sur les navigateurs modernes:

Avant de commencer à étudier l'API, nous devons savoir définir quels éléments de la page sonttraînable. Nous pouvons le faire en ajoutant ledraggableattribut dans la page HTML, avec une valeur detrue:

<div draggable="true">
  ...
</div>

Cela suffit pour rendre l'élément déplaçable.

Conseil: les images, les sélections de texte et les liens peuvent être déplacés par défaut, sauf si vous définissezdraggablefausser sur eux

Nous pouvons également faire glisser des fichiers de l'ordinateur de l'utilisateur dans le navigateur. Dans ce cas, nous transféronsdes dossiers.

Où pouvons-nous faire glisser des éléments est un autre point que nous devons clarifier. De même que nous ne pouvons pas simplement faire glisser un élément, nous ne pouvons pas également simplement déposer dans n'importe quel élément. L'élément doit être validecible de baisse.

Pour faire d'un élément une cible de dépôt, vous écoutez sondragoverévénement et soit vous en retournez false, soit vous appelezpreventDefault()sur l'événement passé:

const element = document.querySelector('#my-drop-target)
element.addEventListener('dragover', event => {
  event.preventDefault()
})

Une fois que nous avons fait cela, nous avons un élément déplaçable et une cible de dépôt, et nous pouvons commencer. Les événements avec lesquels nous pouvons interagir sur l'élément déplaçable sont:

• dragstart
• drag
• dragend

Sur la cible de dépôt:

• dragenter
• dragover
• dragleave
• drop

Vue d'ensemble d'une opération de glisser-déposer et des événements déclenchés

Lorsque l'utilisateur commence à faire glisser unélément déplaçable, en cliquant dessus avec la souris et en déplaçant la souris, ou en appuyant et en maintenant le robinet puis en déplaçant la sélection, ledragstartl'événement est déclenché dessus:

element.addEventListener('dragstart', event => {
  //...
})

Leeventobjet passé en paramètre à la fonction de gestion des événements est unDragEventobjet.

Il s'étend du plus généralObjet événement, partagé avec tous les autres événements: souris, clavier, défilement, etc.

À ce stade, l'élément est déplacé et ledragl'événement est déclenché. Plusieurs fois au fur et à mesure que l'élément est déplacé, nous devons donc utiliser la limitation comme pour lescrolloumouseoverévénements.

Dès que nous entrons dans uncible de baisse:

1. ledragenterl'événement est déclenché sur la cible de dépôt
2. ledragoverl'événement est déclenché sur la cible de dépôt

Si un élément glissé entre d'abord dans une cible de dépôt puis s'en éloigne, ledragleavel'événement est déclenché sur la cible de dépôt.

Si l'utilisateur relâche la souris, ledragendévénement est déclenché sur l'élément qui est déplacé, et undropl'événement est déclenché sur la cible de dépôt.

Faire glisser des données:DataTransfer

Chaque événement lié au glisser-déposer est unDragEventobjet comme je l'ai mentionné, et il est livré avec une propriété appeléedataTransferqui contient les données glissées et offre 5 propriétés:

• dropEffect
• effectAllowed
• files
• items(lecture seulement)
• types(lecture seulement)

Lorsque l'événement de glissement démarre, vous pouvez effectuer quelques opérations.

Définir / obtenir l'effet

Vous pouvez définir l'effet souhaité de l'opération de glissement en définissant leeffectAllowedpropriété dans ledragstartun événement. Vous avez quelques options qui définissent la manière dont la cible de dépôt doit gérer l'élément déposé:

• noneil ne devrait pas être abandonné
• moveil peut être déplacé
• copyil peut être copié
• linkil peut être lié
• copyMoveil peut être copié ou déplacé
• copyLinkil peut être copié ou lié
• linkMoveil peut être déplacé ou lié
• allil peut être copié, déplacé ou lié

(tous sont des chaînes).

La valeur par défaut estall.

LedropEffectLa propriété est utilisée pour obtenir le type de l'opération de glisser-déposer, qui est cette fois définie par l'utilisateur à l'aide de touches de modification. Par exemple, sur un Mac, en appuyant surAltdéfinit la cible de dépôt pour copier l'élément au lieu de le déplacer.

Cette propriété n'est pas en lecture seule. Nous pouvons le modifier dans undragenteroudragoverévénement, à l'une de ces valeurs de chaîne:

• noneil ne devrait pas être abandonné
• moveil peut être déplacé
• copyil peut être copié
• linkil peut être lié

Exemple:

element.addEventListener('dragenter', event => {
  event.dataTrasfer.dropEffect = 'move'
})

Les données en cours de transfert

Vous pouvez accéder aux éléments en cours de transfert depuis ledataTransfer.itemspropriété, qui est un objet de type tableau que vous pouvez itérer à l'aide d'une boucle et accéder à chaqueDataTransferItemobjet.

DataTransferItema 2 propriétés en lecture seule:

• kind: le type d'élément déplacé. Renvoie une chaîne contenantfileoustring
• typele type MIME de l'élément

et il a 2 méthodes:

• getAsFile()renvoie unFileobjet représentant les données en cours de glissement
• getAsString()exécute la fonction de rappel en passant un objet chaîne représentant les données en cours de glissement

Ils ont un nom similaire mais fonctionnent très différemment. Le premier renvoie unFileobjet:

element.addEventListener('dragenter', event => {
  for (item of event.dataTrasfer.items) {
    const theFile = item.getAsFile()
  }
})

En savoir plus sur les objets File surhttps://flaviocopes.com/file/

Le second passe l'élément sous forme de chaîne à une fonction de rappel:

element.addEventListener('dragenter', event => {
  for (item of event.dataTrasfer.items) {
    item.getAsString(theString => {
      console.log(theString)
    })
  }
})

Les types de fichiers d'éléments glissés sont stockés dans letypespropriété de ladataTransferobjet. C'est un tableau contenant la chaînestringpar défaut. Si nous faisons glisser un fichier, le type correspondant est une chaîne de valeurFiles.

S'il y a des fichiers en cours de transfert, en plus d'être répertoriés dansdataTransfer.items, ils sont stockés dans lefilespropriété dedataTransfer.

Cette propriété pointe vers unFileListobjet répertoriant les fichiers glissés.

Découvrez cette démo sur Codepen:

Voir le styloGlisser déposer!par Flavio Copes (@flaviocopes) surCodePen.