Beaucoup de fonctions sont implémentées sur le PC de HTML5, et des téléchargements qui glissent sont également utilisés au travail.
Événement de déclenchement (élément source) sur la cible glisser:Déclencheur d'OnDragstart-Users 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 libération de la cible:Ondrager-Crigged a déclenché cet incident lorsque l'objet traîné par la souris entre dans son conteneur
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
Codage
<html Lang = en> <A-head> <meta charset = utf-8> <tight> 拖拽 </tapt> <ystyle> .box {width: 800px; height: 600px; float: gauche;} # box1 {background- Couleur: #ccc;} # box2 {background-Color: # 000;} </ style> </ head> <body> <div id = box1 class = box> </ div> <div id = box2 class = box> </ div> <img id = img1 src = 1.jpg> <div id = msg> </div> </body> <cript> var box1div, box2div, msgdiv, img1; = Document.getElementById (Box1 '); E) {e.PreventDefault ();} Box2Div.onDragover = fonction (e) {e.PreventDefault ();} img1.ondragstart = fonction (e) d ',' img1 ');} box1div.ondrop = dropImGhandler; .ondrop = DropImGhandler;} Fonction DropImGhandler (e) {showObj (e); j) {s + = k +: + obj [k] + <br/>;} msgdiv.innerhtml = s;} </ script> </html>Cette fonction peut faire glisser l'image vers la méthode dans les deux divs à gauche et à droite.
Ce qui suit est un code glisser et télécharger.
<! heig ht: 500px;} </ style> </ head> <body> <div id = iMgContainer> </div> <div id = msg> </ body> <script> var imgContainer, msgDiv; (E) {imgContainer = document.getElementById ('imgContainer'); E.PreventDefault (); var f = e.datatransfer.Files [0]; // Ce qui suit est le processus affiché dans ImgContainer après avoir obtenu l'image. /> //} // firter.readasdataurl (f); obj [k] + <br/>;} msgdiv.innerhtml = s;} </cript> </html>Ce qui précède est tout le contenu de cet article.