Comment faire glisser et déposer des éléments HTML et des fichiers à L’aide de Javascript

janvier 25, 2021 admin 0 Comments

Pour définir un effet de drop, les étapes suivantes doivent être suivies:

5.1. Déterminer le ou les effets de suppression autorisés sur l’élément déplaçable dans son gestionnaire d’événement dragstart

En utilisant la propriété effectAllowed sur la propriété d’événement dataTransfer, vous définissez tous les effets de suppression autorisés à être appliqués pour cet élément déplaçable.

ceci est fait car différents emplacements de goutte peuvent être définis et différents effets de goutte peuvent être gérés par emplacement de goutte.,

Le tableau suivant définit le possible effectAllowed les valeurs de propriété basé sur MDN docs:

5.2. Pour chaque emplacement de dépôt, définissez le ou les effets de dépôt pour celui-ci dans son gestionnaire d’événements dragover

l’effet de dépôt à définir doit être l’un des effets autorisés déterminés au gestionnaire d’événements dragstart de l’emplacement source.,

lorsqu’un effet de goutte n’est pas l’un des effets de goutte autorisés, il sera défini sur l’un des effets de goutte autorisés.

le gestionnaire de glissement, où l’effet de dépôt doit être défini, est exécuté lorsque l’élément déplacé est déplacé sur un emplacement de dépôt possible.

voici un exemple de définition de la baisse des effets pour un emplacement de dépôt.

6) Définir une Zone de dépôt (Emplacement de dépôt)

Par défaut, aucun élément dans le document HTML permet une goutte., Cependant, cela peut être modifié et pour faire d’un élément une zone de dépôt, il doit avoir:

Le gestionnaire d’événements ondragover, qui est exécuté lorsque l’élément déplaçable est déplacé sur cet élément. Dans ce gestionnaire d’événements, l’effet de chute de l’emplacement de chute est défini comme mentionné précédemment à l’étape 5.2.
Le gestionnaire d’événements ondrop, qui est exécuté lorsque l’élément déplaçable est déposé dans l’emplacement / la zone de glisser.

voici un exemple de définition d’un élément tel qu’un emplacement de dépôt.,

Dans les deux dragover et de la baisse des gestionnaires d’événements, preventDefault() doit être appelée pour permettre une baisse, ce qui indique qu’une baisse est autorisée à cet endroit.

Si un drop n’est autorisé que dans certaines situations où des conditions sont utilisées, ajoutez preventDefault uniquement si les conditions d’autorisation d’un drop sont remplies. Ceci est fait pour éviter que l’élément soit une zone de dépôt si les conditions ne sont pas remplies où la suppression ne devrait pas être autorisée.,

le rejet d’un drop basé sur le type des données de glisser dans la propriété dataTransfer est un cas courant. L’exemple suivant montre cela en autorisant uniquement les liens à être supprimés dans l’élément de zone de dépôt qui a le gestionnaire de dragover.

7) la Poignée de l’Élément Drop

Lors de la chute de l’événement, le faire glisser des données doivent être traitées. Pour ce faire, la méthode getData() sur la propriété d’événement dataTransfer est utilisée.,

la méthode getData() récupère les éléments de glisser car elle prend un seul argument du type de données à récupérer et elle renverra la valeur de chaîne qui lui est associée.

Les propriétés allowedEffect et dropEffect permettent de contrôler les commentaires qui seront présentés à l’utilisateur.

la gestion de ces commentaires est la responsabilité du développeur et doit être implémentée dans le gestionnaire d’événements drop. Par exemple, récupérer un élément et l’ajouter à un autre parent le déplacera, mais la copie du nœud entraînera un effet de copie.,

Si plusieurs effets de dépôt sont définis pour une seule zone de dépôt, la propriété dropEffect doit être utilisée pour déterminer l’opération de glisser souhaitée pour cet événement de dépôt particulier.

voici un exemple de manipulation d’une chute.

Parfois, vous pouvez avoir pris en charge les différents types de données mais qui ne veulent récupérer le plus spécifique de type. Le code suivant de MDN docs le démontre.,

8) Utilisation dragend Événement pour Vérifier si la Baisse a été un Succès

À la fin d’une opération de glisser, un dragend événement se déclenche à l’élément source. L’événement se déclenche si le glisser a réussi ou a été annulé.

pour vérifier si l’opération de glisser a réussi ou non, la valeur de dropEffect peut être vérifiée comme suit:

Si la valeur de la propriété dropEffect est « none” Dans le gestionnaire d’événements dragend, cela signifie que les opérations de glisser ont été annulées.,
sinon, la valeur de la propriété dropEffect est l’opération qui a été effectuée avec succès.

Hmm, alors en quoi est-ce utile?

l’élément source peut utiliser ces informations après une opération de déplacement réussie pour supprimer l’élément déplacé de l’ancien emplacement.

Démo sur le HTML de l’Élément Glisser & Goutte

Code de démo pour le code HTML de l’Élément glisser et drop

Remarque: vous pouvez également cloner le projet de mon Github ici.,

1) Detect the Drag & Drop Feature Support in Your Browser

Before using the HTML drag & drop API, add feature detection code to ensure browser support.

The following code is the feature detection code for the HTML drag & drop API from Modernizr.,

2) Définir une Zone de dépôt (Emplacement de dépôt)

Par défaut, aucun élément dans le document HTML permet une goutte. Cependant, cela peut être modifié et pour faire d’un élément une zone de dépôt, il doit avoir:

Le gestionnaire d’événements ondragover, qui est exécuté lorsque le ou les fichiers sont/sont glissés sur l’emplacement de dépôt.
Le gestionnaire d’événements ondrop, qui est exécuté lorsque le ou les fichiers sont / sont déposés dans l’emplacement de dépôt.,

comme indiqué par MDN docs:

les événements dragstart et dragend ne sont pas déclenchés lorsque vous faites glisser un fichier dans le navigateur à partir du système d’exploitation.

Voici un exemple pour définir un élément comme emplacement de dépôt.

3) Gérer le Fichier de Drop

Lorsque l’utilisateur déplace le fichier(s) dans une zone de dépôt, une baisse de l’événement sera déclenché. Pendant la chute de l’événement, le ou les fichier(s) devraient être traitées comme souhaité.,

pour accéder à chaque fichier supprimé, utilisez la propriété DataTransfer de L’événement pour accéder à la propriété files. Après avoir accédé à un fichier abandonné, utilisez L’API de fichier pour le traiter.

Si le navigateur prend en charge la propriété DataTransferItemList, vous pouvez l’utiliser avec la méthode getAsFile() au lieu d’utiliser la propriété DataTransfer pour accéder au fichier.

dans les gestionnaires d’événements dragover et drop, preventDefault() doit être appelée pour autoriser un drop car elle indique qu’un drop est autorisé à cet emplacement., Il empêche également l’ouverture du fichier, ce qui est le comportement par défaut qui se produit lors de la suppression d’un fichier dans une page web.

l’exemple suivant, de MDN docs, montre le traitement des fichiers déposés, où un élément de glisser qui n’est pas un fichier est ignoré., Both possible ways are demonstrated in this

Demo on HTML Element’s Drag & Drop

Note: you can also clone the project from my Github here.