Eine Menge Funktionen werden auf dem PC von HTML5 implementiert, und bei der Arbeit werden auch Ziehen -Uploads verwendet.
Triggerereignis (Quellelement) auf dem Ziehziel auslösen:ONDRAGSTART -E -Benutzer auslösen, wenn der Benutzer beginnt, das Element zu ziehen
ONDRAGE -Element wird beim Ziehen ausgelöst
ONDRAGEND -User -Vervollständigung Element Drag Trigger
Ereignis ausgelöst bei der Veröffentlichung des Ziels:ONDRAGERTER - -hat diesen Vorfall ausgelöst, als das von der Maus geschleppte Objekt in seinen Container eintritt
ONDRAGOVER -Wenn ein gezogenes Objekt im Bereich eines anderen Objektbehälters gezogen wird, löst es diesen Vorfall aus
ONDRAGLEAVE -Legen Sie diesen Vorfall aus, wenn das von der Maus gezogene Objekt den Behälter verlässt
ONDROP -DRUCKEN SIE DIE EREIGUNGSETEN, WENN DIE MOUSE -Taste veröffentlichen
Codierung
<html lang = en> <kopf> <meta charset = utf-8> <titels> 拖拽 </title> <style> .box {width: 800px; Höhe: 600px; float: links;} #box1 {Hintergrund- {Hintergrund- Farbe: #ccc;}#Box2 {Hintergrund-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> <script> var box1div, box2div, msgdiv, img1; = Document.getElementById ('Box1'); E) {e.preventDefault ();} box2Div.ondRagover = Funktion (e) {E.PreventDefault ();} img1.ondragstart = function (e) d ',' img1 '); .onDrop = DropImgHandler;} function DropImgHandler (e) {showObj (e); j) {s+= k+:+obj [k]+<br/>;} msgdiv.innerhtml = s;} </script> </html>Diese Funktion kann das Bild in den beiden Divs links und rechts an die Methode ziehen.
Das Folgende ist ein Ziehen- und Upload -Code.
<! 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 (); // Folgendes ist der in ImgContainer angezeigte Vorgang nach dem Erhalt des Bildes. /> //} // firster.readasDataurl (f); OBJ [K]+<br/>;} msgdiv.innerhtml = s;} </script> </html>Das oben genannte ist der Inhalt dieses Artikels.