Explication détaillée de l'événement Drag and Drop dans HTML5 (Drag and Drop)

Internet Explorer 9, Firefox, Opera 12, Chrome et Safari 5 prennent en charge la traînée et la dépôt.

 <! JavaScript> Fonction AllowDrop (ev) {ev.PreventDefault ();} Fonction Drag (ev) {ev.Datatransfer.setData (Text, ev.Target.id); Ev.datatransfer.getData (texte); = drop (event) ondragover = allowdrop (event)> div> <r /> <img id = drag1 src = http: //www.aseoe.com/statics/images /eoe/logo.png greatgable = true ondragstart = drag = (Événement) /> </ body> </html>

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

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.

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 ()

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 ();

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)

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