Raid sur l'extension 4 de l'API Javascript HTML5 – Présentation du glisser/déposer_html5 Conseils du didacticiel

Le glisser/déposer est une fonction très courante. Vous pouvez saisir un objet et le faire glisser vers la zone où vous souhaitez le placer. De nombreux javascripts implémentent des fonctions similaires, par exemple le composant glisser-déposer de jQueryUI. En HTML5, le glisser-déposer est devenu une opération standard et est pris en charge par n'importe quel élément. Cette fonctionnalité étant si courante, tous les principaux navigateurs prennent en charge cette opération.
Activer l'attribut drag-draggable
C'est très simple. Il vous suffit de changer l'attribut drag d'un élément en draggable. Cet élément prendra en charge le glisser, comme indiqué ci-dessous :

Transfert de données pendant le glisser
Pendant le processus de glisser, nous devons souvent transférer les données logiques correspondantes pour terminer le processus de conversion. Ici, nous utilisons principalement l'objet dataTransfer. pour le transfert de données. , jetons un œil à ses membres :
Méthode membres :


format : un paramètre String qui spécifie le type de données déplacées. La valeur de ce paramètre peut être « Texte » (type de texte) et « URL » (type d'URL). Ce paramètre est indépendant de la casse, donc transmettre "texte" et "Texte" sont identiques.
data : Un paramètre de type variant qui spécifie les données déplacées. Les données peuvent être du texte, des chemins d'images, des URL, etc.
Cette fonction a une valeur de retour booléenne, true signifie que les données ont été ajoutées avec succès à dataTransfer, false signifie un échec. Si nécessaire, vous pouvez utiliser ce paramètre pour décider si certaines logiques doivent continuer à être exécutées.


La signification du format est la même que celle de setData, et la valeur peut être "Texte" (type de texte) et "URL" (type d'URL).


En plus du "Texte" (type de texte) et de l'"URL" (type d'URL) qui peuvent être précisés ci-dessus, le format ici peut également prendre les valeurs suivantes : fichier-fichier, html- élément html, image -image.
Cette méthode peut être utilisée pour traiter sélectivement le type de données déplacé.
Membres d'attribut :


Le type d'attribut est une chaîne et la plage de valeurs est la suivante :
"copier" - copier les données
"lien" - données de lien
"déplacer" -. déplacer les données
"copyLink" - Copier ou lier des données, déterminées par l'objet cible.
"copyMove" - ​​Copiez ou déplacez des données, déterminées par l'objet cible.
"linkMove" - ​​​​​​Liez ou déplacez des données, comme déterminé par l'objet cible.
"toutes" - Toutes les opérations sont prises en charge.
"aucun"-Désactiver le glisser.
"non initialisé" -Valeur par défaut, adopte le comportement par défaut.
Notez qu'après avoir défini effectAllowed sur none, le glisser est interdit, mais la forme de la souris affiche toujours la forme d'un objet non déplaçable. Si vous ne souhaitez pas afficher cette forme de souris, vous devez définir l'attribut returnValue de l'événement d'événement de fenêtre. à faux.


Le type d'attribut est une chaîne et la plage de valeurs est la suivante :
"copie" - la souris est affichée sous forme de forme lorsqu'elle est copiée
"lien" - la souris est ; affiché comme forme connectée ;
"move" - La souris apparaît comme une forme en mouvement.
"aucun" (par défaut) - La souris apparaît comme une forme sans glisser.
effectAllowed spécifie les opérations prises en charge par la source de données, elle est donc généralement spécifiée dans l'événement ondragstart. dropEffect spécifie les opérations prises en charge par la cible de glisser-déposer, donc en conjonction avec effectAllowed, il est généralement utilisé dans les événements ondragover, ondragover et ondrop sur la cible de glisser.


L'existence de l'objet dataTransfer permet de transférer des données logiques entre la source de données glissée et l'élément cible. Habituellement, nous utilisons la méthode setData pour fournir des données dans l'événement ondragstart de l'élément source de données, puis utilisons la méthode getData pour obtenir les données dans l'élément cible.
Événements déclenchés lors d'un glissement
Voici les événements qui se produiront lors d'un glissement. Fondamentalement, la séquence d'événements déclencheurs est la séquence suivante :

Fondamentalement, les paramètres de l'événement seront transmis dans les éléments pertinents, qui peuvent être facilement modifiés. Ici, nous n'avons pas besoin de gérer tous les événements, nous devons généralement uniquement relier les événements principaux.

Événement Drag start-ondragstart Les paramètres transmis par cet événement contiennent des informations très riches, à partir desquelles l'élément déplacé (event.Target) peut être facilement obtenu. Vous pouvez définir les données déplacées ; (event.dataTransfer.setData); afin que vous puissiez facilement implémenter la logique derrière le glisser (bien sûr, vous pouvez également transmettre d'autres paramètres lors de la liaison).

Pendant le processus de déplacement - événements ondrag, ondragover, ondragenter et ondragleave
L'objet de l'événement ondrag est l'élément glissé, et généralement cet événement est géré moins fréquemment. L'événement ondragenter se produit lorsque le glisser entre dans l'élément actuel, l'événement ondragleave se produit lorsque le glisser quitte l'élément actuel et l'événement ondragover se produit lorsque le glisser se déplace dans l'élément actuel. Vous ne devez faire attention qu'à une chose ici, car par défaut, le navigateur interdit la suppression d'éléments, donc pour permettre la suppression d'éléments, vous devez renvoyer false dans cette fonction ou appeler event.preventDefault () méthode. Comme le montre l'exemple ci-dessous.

Faites glisser la fin du dépôt, événement ondragend Lorsque les données déplaçables sont déposées, l'événement de dépôt est déclenché. Une fois le dépôt terminé, l'événement dragend est déclenché et cet événement est relativement rarement utilisé.
Regardez un exemple simple :