Glisser-déplacer JavaScript

Résumé: dans ce didacticiel, vous découvrirez lAPI de glisser-déposer JavaScript.

Introduction à lAPI JavaScript Drag and Drop

HTML5 a officiellement introduit la spécification glisser-déposer. La plupart des navigateurs Web modernes ont implémenté le glisser-déposer natif basé sur la spécification HTML5.

Par défaut, seuls limage et le texte peuvent être déplacés. Pour faire glisser une image, il vous suffit de maintenir le bouton de la souris enfoncé, puis de la déplacer. Pour faire glisser le texte, vous devez mettre du texte en surbrillance et le faire glisser de la même manière que vous feriez glisser une image.

La spécification HTML5 spécifie que presque tous les éléments peuvent être déplacés. Pour rendre un élément déplaçable, vous ajoutez la propriété draggable avec la valeur true à sa balise HTML. Par exemple:

Code language: HTML, XML (xml)

Événements sur les éléments déplaçables

Lorsque vous faites glisser un élément, ces événements se déclenchent dans lordre suivant:

• dragstart
• drag
• dragend

Lorsque vous maintenez le bouton de la souris enfoncé et que vous commencez à déplacer la souris, lévénement dragstart se déclenche sur lélément déplaçable que vous traînez. Le curseur se transforme en un symbole de non-dépôt (un cercle traversé par une ligne) pour indiquer que vous ne pouvez pas déposer lélément sur lui-même.

Après le dragstart lévénement se déclenche, lévénement drag se déclenche à plusieurs reprises tant que vous faites glisser lélément.

Et lévénement dragend se déclenche lorsque vous arrêtez de faire glisser lélément.

La cible de tous les événements (e.target) est lélément qui est déplacé.

Par défaut , le navigateur ne modifie pas lapparence de lélément déplacé. Par conséquent, vous pouvez personnaliser son apparence en fonction de vos préférences.

Événements sur les cibles de dépôt

Lorsque vous faites glisser un élément sur une cible de dépôt valide, ces événements se déclenchent dans lordre suivant:

• dragenter
• dragover
• dragleave ou drop

Lévénement dragenter se déclenche dès lorsque vous faites glisser lélément sur une cible de dépôt.

Après le déclenchement de lévénement dragenter, lévénement dragover se déclenche à plusieurs reprises tant que vous faites glisser lélément à lintérieur de la limite de la cible de dépôt.

Lorsque vous faites glisser lélément à lextérieur de la limite de la cible de dépôt, le dragover lévénement cesse de se déclencher et lévénement dragleave se déclenche.

Si vous déposez lélément sur la cible, le drop lévénement se déclenche à la place de lévénement dragleave.

La cible ( ) de dragenter, dragover, dragleave et drop sont les éléments de cible de dépôt.

Cible de dépôt valide

Presque tous les éléments prennent en charge les événements de cible de dépôt (dragenter, dragover, dragleave et drop). Cependant, ils nautorisent pas le dépôt par défaut.

Si vous déposez un élément sur une cible de dépôt qui ne permet pas de le déposer, lévénement drop lemporte t fire.

Pour transformer un élément en une cible de dépôt valide, vous pouvez remplacer le comportement par défaut de dragenter et dragover en appelant la méthode event.preventDefault() dans leurs gestionnaires dévénements correspondants. (Voir la section exemple pour plus dinformations)

Transférer des données à laide de lobjet dataTransfer

Pour transférer des données dans une action glisser-déposer, vous utilisez le dataTransfer objet.

Lobjet dataTransfer est une propriété de lévénement. Il vous permet de transférer des données de lélément glissé vers la cible de dépôt.

Lobjet dataTransfer a deux méthodes: setData() et getData().

Le setData() vous permet de définir les données de lopération de glissement au format et aux données spécifiés :

Code language: CSS (css)

Le format peut être text/plain ou text/uri-list. Et les données peuvent être une chaîne représentant les données à ajouter à lobjet de glissement.

La méthode getData() récupère les données de glissement stockées par setData().

Le getData() accepte un argument:

Le format peut être text/plain ou text/uri-list. La getData() renvoie une chaîne stockée par la méthode setData() ou une chaîne vide si lopération de glissement ninclut pas de données.

Exemple de glisser-déposer JavaScript

Nous allons développer lapplication simple glisser-déposer suivante pour illustrer lAPI de glisser-déposer JavaScript:

Créez le structure du projet

Commencez par créer un nouveau dossier appelé drag-n-drop-basics. Dans ce dossier, créez deux sous-dossiers appelés css et js.

Deuxièmement, créez un nouveau fichier appelé app.js dans le dossier js, style.css dans le css et index.html dans le dossier drag-n-drop-basics.

Troisièmement, placez le lien vers le style.css et balise de script qui renvoie vers app.js dans le fichier index.html comme ceci:

Construisez le fichier index.html

Placez le code suivant dans le fichier index.html:

Dans ce fichier index.html, nous avons utilisé lélément .container pour aligner len-tête et lélément drop-targets.

À lintérieur de lélément drop-target, nous placé trois éléments div avec la même classe box. Et nous plaçons un autre élément div avec la classe item dans la première case.

Si vous ouvrez le index.html et essayez de faire glisser la case jaune, vous verrez le curseur indiquant que vous ne pouvez pas faire glisser:

Pour rendre lélément déplaçable, vous ajoutez la propriété draggable avec la valeur true à sa balise HTML comme suit:

Code language: JavaScript (javascript)

Maintenant, si vous enregistrez le index.html, ouvrez-le dans le navigateur encore une fois, vous verrez que vous pouvez faire glisser lélément item comme ceci:

Gérer les événements sur lélément déplaçable

Le fichier style.css a le .hide classe qui cache un élément:

Code language: CSS (css)

Dans le fichier app.js, vous ajoutez le code suivant:

Comment je Cela fonctionne:

• Tout dabord, sélectionnez lélément déplaçable à laide de querySelector().
• Ensuite, attachez un dragstart gestionnaire dévénements sur lélément déplaçable.
• Troisièmement, définissez la fonction dragStart() pour gérer la dragstart.

Si vous ouvrez le fichier index.html et commencez à faire glisser lélément déplaçable, vous verrez le message drag starts... dans la console.

Dans le gestionnaire dévénements dragStart, vous devez stocker le id de lélément déplaçable. Et vous devez le cacher:

Si vous faites glisser lélément, vous verrez quil disparaît une fois que vous commencez à faire glisser.

Pour résoudre ce problème, vous utilisez le setTimeout():

Maintenant, vous pouvez faire glisser lélément déplaçable hors de sa position dorigine:

Gérer les événements sur les cibles de dépôt

Le fichier style.css a également une classe CSS appelée .drag-over qui transforme le style de bordure de la cible de dépôt en pointillé et rouge:

Code language: CSS (css)

Dans le fichier app.js, vous avez besoin pour sélectionner les éléments cibles de dépôt et gérer les dragenter, dragover, dragleave et drop événements de ces éléments:

Le style de bordure de la cible de dépôt doit changer lorsque dragenter et dragover lévénement se produit. Il devrait restaurer le style lorsque lévénement dragleave et drop se produit.

Pour ce faire, vous ajoutez et supprimez la classe drag-over vers la cible drop comme ceci:

Maintenant, si vous faites glisser lélément déplaçable vers un autre dépôt cible, vous verrez que la bordure de la cible de dépôt change comme indiqué dans limage suivante:

Pour rendre la cible de dépôt valide, vous devez appeler event.preventDefault() dans le dragenter et dragover gestionnaires dévénements comme celui-ci:

Si vous ne le faites pas, lévénement drop ne sera jamais se déclenche car lélément div nest pas une cible de dépôt valide par défaut.

Si vous faites glisser lélément déplaçable vers une cible de dépôt, vous verrez que le curseur modifications indiquant que vous pouvez supprimer lélément:

Maintenant, si vous déposez lélément item, vous verrez quil disparaît immédiatement.

Pour résoudre ce problème problème, vous devez ajouter le handle de lévénement drop.

• Tout dabord, récupérez le id de lélément déplaçable en utilisant la méthode getData() du dataTransfer objet.
• Deuxièmement, ajoutez lélément déplaçable en tant quélément enfant de lélément cible de dépôt.
• Troisièmement, supprimez le hide de lélément draggable.

Le code suivant montre la drop gestionnaire dévénements:

Si vous faites glisser et déposez lélément déplaçable maintenant, il devrait fonctionner comme prévu.

Ce qui suit montre le fichier app.js complet:

Et voici le lien vers la démo.

Résumé

• Ajoutez la propriété draggable avec la valeur true à un élément pour le rendre déplaçable.
• Les dragstart, drag et dragend les événements se déclenchent sur lélément déplaçable.
• Les dragenter, dragover, ou drop se déclenchent sur la cible de dépôt.
• Appelez le event.preventDefault() sur le dragenter et dragover gestionnaires dévénements pour faire dun élément une cible de dépôt valide.
• Utilisez le event.dataTransfer avec les méthodes setData() et getData() pour transférer des données dans lopération glisser-déposer.