Explication détaillée et code d'instance de HTML5

Auteur：Eve Cole Date de mise à jour：2025-02-04 12:24:01

Brève introduction

Le glisser-déposer est une caractéristique commune, c'est-à-dire glisser vers une autre position après l'objet de capture.

Dans HTML5, Drag and Drop est une pièce standard, et tout élément peut être glisser et abandonné.

Cliquez d'abord un petit exemple: exécutez JavaScript lorsque l'utilisateur commence à faire glisser <p> des éléments

 <p draggable = true onDragstart = myFunction (événement)> glisser-moi! </p>

Astuce: les liens et les images sont glissés par défaut et n'ont pas besoin de propriétés draggables.

Définition et utilisation

Les événements suivants seront déclenchés pendant le processus de glisser-déposer:

Déclenchez l'événement (élément source): ondragstart -Usser -Quelle lorsque l'utilisateur commence à faire glisser l'élément
- ENDRAG -element est déclenché lors de la traînée
- ENDRAGEND -User le déclencheur de gouttes d'élément de complétion
Événement déclenché lors de la publication de la cible: ondrager-où l'objet traîné par la souris entre dans le conteneur, il déclenche cet événement
- Ondragover -Là d'un objet traîné est traîné dans la plage d'un autre conteneur d'objet, il déclenche cet incident
- Ondragleave -criger cet incident lorsque l'objet traîné par la souris quitte le conteneur
- Ondrop - En traînant une traînée, il déclenche cet événement lors de la publication de la clé de la souris

Support de navigateur

Internet Explorer 9+, Firefox, Opera, Chrome et Safari Soutièrent.

Remarque: Safari 5.1.2 ne prend pas en charge la traînée;

Exemple

Postez d'abord le code, puis expliquez un par un:

 <! Border: 1px solide #aaaaaa;} </pyle> </ head> <body> <p> glisser img_w3slogo.gif image vers la boîte rectangulaire: </p> <div id = div1 ondrop = drop (event) ondragover = allowdrop (Même t)> </ div> <br> <img id = drag1 src = images / img_w3slogo. Ev.PreventDefalt ();} Fonction Drag (ev) {ev.datatransfer.setData (text, ev.target.id);} function drop (ev) {ev.preventDefault (); ;

L'effet de la page avant de traîner est:

Analysons la signification du code suivant ci-dessous.

Définir l'élément peut être traîné et abandonné

Tout d'abord, afin de faire glisser l'élément, définissez la propriété draggable sur true:

 <Img draggable = true>

Quoi glisser-claire et setData ()

Il est ensuite spécifié ce qui se passe lorsque l'élément est traîné.

Dans l'exemple ci-dessus, la propriété OnDragstart appelle une fonction, glisser (événement), qui spécifie les données glissées.

Méthode datatransfer.setData () Définissez le type de données et la valeur des données de traînée de données:

 Fonction Drag (ev) {ev.datatransfer.setData (texte, ev.target.id);}

Dans cet exemple, le type de données est du texte et la valeur est id (drag1) qui peut faire glisser l'élément.

Où le mettre

L'événement Ondragover stipule où placer les données traînées.

Par défaut, les données / éléments ne peuvent pas être placés dans d'autres éléments. Si vous devez définir le placement autorisé, nous devons empêcher le traitement par défaut des éléments.

Il s'agit d'appeler la méthode Event.PreventDefault () de l'événement Ondragover: :):

 event.preventDefault ()

Mettre en place

Lorsque les données de glisser sont placées, l'événement DROP se produit.

Dans l'exemple ci-dessus, l'attribut ONDROP appelle une fonction, Drop (événement):

 Fonction Drop (EV) {ev.PreventDefault ();

Explication du code:

Appelez la prévention de Fardefault () pour éviter le traitement par défaut du navigateur des données (le comportement par défaut de l'événement de dépôt est ouvert dans un lien)
Obtenez les données traînées via la méthode Datatransfer.getData (texte). Cette méthode reviendra à toutes les données du même type dans la méthode setData ().
Les données de glisser sont l'ID de l'élément glisser (drag1)
Élément de traînée supplémentaire vers l'élément de placement (élément cible)

Les résultats de la mise en œuvre sont tels que montrés sur la figure:

Objet DataTransfer

Pendant l'opération de glisser, nous pouvons utiliser l'objet DataTransfer pour transmettre les données pour effectuer d'autres opérations sur les données lorsque l'opération de traînée est terminée.

Attribut objet:

Dropeffect: définissez ou renvoyez le comportement de glisser-déposer qui se produit sur la cible de glisser-déposer. Si le comportement de glisser-déposer est défini ici dans les différents paramètres de comportement de glisser-déposer défini par les paramètres d'attribut Effectallowed, l'opération de glisser-déposer échouera. Cette valeur d'attribut n'est que l'une des quatre valeurs de NULL, Copy, Link and Move.
Effectallowed: Définir ou retourner le comportement de glisser que l'élément de traînée a autorisé. Cette valeur d'attribut peut être définie sur None, Copy, CopyLink, CopyMove, Link, LinkMove, Move, All, et non initialisé.
Éléments: Cet attribut renvoie l'objet DataTransFerItems, qui représente les données de glisser.
Types: Cet attribut renvoie un objet DomStringList, qui comprend tous les types de données stockées dans les données dans Datatransfer.

Méthode de l'objet:

SetData (format, données): attribuez les données au format spécifié à l'objet Datatransfer.
GetData (format): Obtenez les données dans le format spécifié à partir de l'objet Datatransfer, le format représente le format de données, les données sont des données.
ClearData ([Format]): Supprimez les données du format spécifié à partir de l'objet DataTransfer.
AddElement (élément): Ajouter une icône personnalisée
SetDragimage (élément, x, y): définissez l'icône personnalisée de l'opération de glisser-déposer. Parmi eux, les éléments définissent une icône personnalisée, X définit la distance entre l'icône et la souris dans le sens horizontal et la distance entre l'icône et la souris dans la direction verticale.

Identifier ce qui est drawgable

 Fonction dragstart_handler (ev) {console.log (dragstart); = p1 draggable = true onDragstart = dragstart_handler (événement);> Cet élément est drawgable.

Définissez les données du glisser

 Fonction dragstart_handler (ev) {// ajouter les données de glisser ev.datatransfer.setdata (text / plain, ev.target.id); ;

Définissez l'image de glisser

 Fonction DragStart_Handler (EV) {// Créez une image, puis utilisez-la pour l'image glisser. ();

Définir l'effet de traînée

 Fonction dragstart_handler (ev) {// Définissez l'effet de glisser pour copier ev.datatransfer.dropeffect = copy;}

Définir une zone de chute

 Fonction dragover_handler (ev) {ev.preventDefault (); Élément vers les données Dominal de Target = ev.datatransfer.getData (texte); div> </ody>

Problème de traînée du navigateur de Firefox

Mais allez ici et trouvez un problème dans le navigateur Firefox:

La traînée de HTML5 utilise la prévention pour empêcher la page Pop -Up POP, mais elle ne fonctionne pas sous Firefox?

Solution:

 document.body.ondrop = fonction (événement) {event.PreventDefault ();

Ou pour l'exemple ci-dessus, il est également possible d'ajouter à la méthode d'onDrop:

 Fonction Drop (EV) {ev.PreventDefault (); ev.Stoppropagation ();

Ce qui précède est tout le contenu de cet article.