มีการใช้ฟังก์ชั่นจำนวนมากบนพีซีของ HTML5 และการอัพโหลดการลากยังใช้ในที่ทำงาน
เหตุการณ์ทริกเกอร์ (องค์ประกอบต้นทาง) บนเป้าหมายการลาก:onDragStart -users ทริกเกอร์เมื่อผู้ใช้เริ่มลากองค์ประกอบ
OnDrag -Element จะถูกกระตุ้นเมื่อลาก
OnDragend -user Election Element Drag Trigger
เหตุการณ์ที่เกิดขึ้นเมื่อปล่อยเป้าหมาย:OnDragenter -กระตุ้นเหตุการณ์นี้เมื่อวัตถุที่ถูกลากโดยเมาส์เข้าสู่คอนเทนเนอร์
OnDragover -เมื่อวัตถุลากถูกลากภายในช่วงของคอนเทนเนอร์วัตถุอื่นมันจะกระตุ้นเหตุการณ์นี้
Ondragleave -trigger เหตุการณ์นี้เมื่อวัตถุที่ถูกลากโดยเมาส์ออกจากคอนเทนเนอร์
ondrop -ในระหว่างการลากมันกระตุ้นเหตุการณ์นี้เมื่อปล่อยคีย์เมาส์
การเข้ารหัส
<html lang = en> <head> <meta charset = utf-8> <title> 拖拽 </title> <style> .box {width: 800px; ความสูง: 600px; float: ซ้าย;} #box1 {พื้นหลัง- สี: #ccc;}#box2 {พื้นหลังสี:#000;} </style> </head> <body> <div id = box1 class = box> </div> <div id = box2 class = box> 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 = ฟังก์ชั่น (e) {e.preventdefault ();} img1.ondragstart = ฟังก์ชั่น (e) d ',' img1 ');} box1div.ondrop = dropimghandler; .ondrop = dropimghandler;} dropimghandler (e) {showobj (e); j) {s+= k+:+obj [k]+<br/>;} msgdiv.innerhtml = s;} </script> </html>ฟังก์ชั่นนี้สามารถลากรูปภาพไปยังวิธีการในสอง divs ทางซ้ายและขวาฉันคิดว่ามันไร้ประโยชน์
ต่อไปนี้เป็นรหัสการลากและอัปโหลด
<! 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 (); // ต่อไปนี้เป็นกระบวนการที่แสดงใน imgcontainer หลังจากได้รับรูปภาพ // //} // firster.readasdataurl (f); obj [k]+<br/>;} msgdiv.innerhtml = s;} </script> </html>ข้างต้นเป็นเนื้อหาทั้งหมดของบทความนี้