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

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

Php8, je viens aussi

Apprenez la mise en page d'un site Web en 30 minutes

Tutoriel vidéo Shangguan Oracle débutant à compétent

Votre première ligne de code UNI-APP

Flutter de zéro au lancement de l'application

Brother Lian Nouveau didacticiel vidéo Linux

Tutoriel vidéo AXURE 9 (convient à l'interface utilisateur interactive de conception de produits du chef de produit)

Tutoriel vidéo PS Zero Basic Proficiency

Tutoriel vidéo de 16 jours sur l'interface utilisateur pour vous aider à démarrer

Tutoriel vidéo sur les techniques PS et les techniques de découpage

Tutoriel vidéo sur la construction et le lancement de projets d'Alibaba Cloud Environment

Présentation des réseaux informatiques - Connaissances de base que les programmeurs doivent maîtriser

Tutoriel essentiel pour les programmeurs - Explication du protocole HTTP

Tutoriel vidéo Websocket

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