Html5 implémente comment glisser-déposer des images entre deux conseils du didacticiel div elements

Effet original

L'effet après avoir glissé

Le code est le suivant

Copier le code Le code est le suivant : [code] #div1, #div2 {float:left ; largeur : 100 px ; hauteur : 35 px ; marge : 10 px; >function allowDrop (ev) { ev.preventDefault(); } function drag(ev) { ev.dataTransfer.setData("Texte",ev. target.id ); } function drop(ev) { ev.preventDefault(); var data=ev.dataTransfer.getData("Text"); ev.target .appendChild(document.getElementById(data)); } &lt ;/body>

[/code] Ça peut paraître un peu compliqué, mais on peut étudier les différentes parties du glisser-déposer événement séparément.

Définir l'élément comme déplaçable Tout d'abord, afin de rendre l'élément déplaçable, définissez l'attribut draggable sur true :

Copiez le code Le code est le suivant :

Que faire glisser - ondragstart et setData() Ensuite, précisez ce qui se passe lorsque l'élément est déplacé.

Dans l'exemple ci-dessus, l'attribut ondragstart appelle une fonction, drag( event

), qui spécifie les données à faire glisser. La méthode dataTransfer.setData() définit le type de données et la valeur des données déplacées :

Copier le code Le le code est le suivant : function drag(ev) { ev.dataTransfer.setData("Text",ev.target.id); }

Dans cet exemple, le type de données est "Texte" et la valeur est l'identifiant de l'élément déplaçable ("drag1"). Où mettre - ondragover L'événement ondragover spécifie où placer les données glissées.

Par défaut, les données/éléments ne peuvent pas être placés à l'intérieur d'autres éléments. Si nous devons autoriser le placement, nous devons empêcher la gestion par défaut de l'élément.

Cela se fait en appelant la méthode event

.preventDefault() de l'événement ondragover :

Copier le code Le code est le suivant : event.preventDefault()

à placer - ondrop Lorsque les données déplacées sont déposées, l'événement de dépôt se produit.

Dans l'exemple ci-dessus, l'attribut ondrop appelle une fonction, drop( event

):

Copier le code Le code est le suivant : function drop(ev) { ev.preventDefault(); "Texte "); ev.target.appendChild(document.getElementById(data)); }

Explication du code : Appelez PreventDefault() pour éviter le traitement des données par défaut du navigateur (le comportement par défaut de l'événement drop est de l'ouvrir sous forme de lien) et obtenez les données glissées via la méthode dataTransfer.getData("Text"). Cette méthode renverra n'importe quel ensemble de données du même type dans la méthode setData(). Les données déplacées sont l'identifiant de l'élément déplacé ("drag1"). Ajoutez l'élément déplacé à l'élément placé (élément cible) .

Html5 implémente comment glisser-déposer des images entre deux conseils du didacticiel div elements_html5