Cukup banyak fungsi yang diimplementasikan pada PC HTML5, dan unggahan seret juga digunakan di tempat kerja.
Peristiwa pemicu (elemen sumber) pada target seret:OnDragStart -Users memicu saat pengguna mulai menyeret elemen
Ondrag -Element dipicu saat menyeret
OnDragend -User Penyelesaian Elemen Penyelesaian Trigger
Peristiwa dipicu saat merilis target:Ondragenter -Kem.
Ondragover -Ketika objek yang diseret diseret dalam kisaran wadah objek lain, itu memicu kejadian ini
Ondragleave -Trigger Kejadian ini ketika objek diseret oleh mouse meninggalkan wadah
Ondrop -Selama hambatan, ini memicu acara ini saat merilis kunci mouse
Pengkodean
<html lang = en> <head> <meta charset = utf-8> <title> 拖拽 </iteme> <tyle> .box {width: 800px; tinggi: 600px; float: left;} #box1 {latar belakang- Warna: #ccc;}#box2 {latar belakang-color:#000;} </tyle> </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 = function (e) {e.preventdefault ();} img1.ondragStart = fungsi (e) d ',' img1 ');} box1div.ondrop = dropimghandler; .ondrop = dropimghandler;} Fungsi dropimghandler (e) {showobj (e); j) {s+= k+:+obj [k]+<br/>;} msgdiv.innerHtml = s;} </script> </html>Fungsi ini dapat menyeret gambar ke metode dalam dua div di sebelah kiri dan kanan.
Berikut ini adalah kode seret dan unggah.
<! 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 (); // Berikut ini adalah proses yang ditampilkan di ImgContainer setelah mendapatkan gambar. /> //} // firster.readasdataurl (f); obj [k]+<br/>;} msgdiv.innerHtml = s;} </script> </html>Di atas adalah semua isi artikel ini.