Dibutuhkan 5 menit untuk mengetahui drag and drop html5, serta urutan kejadian pemantauan dan eksekusi lainnya.
Definisi dan penggunaanPeristiwa berikut akan dipicu selama proses drag and drop:
Memicu peristiwa pada target tarik (elemen sumber):
Peristiwa yang dipicu ketika target dilepaskan:
Internet Explorer 9+, Firefox, Opera, Chrome, dan Safari mendukung menyeret.
Catatan: Safari 5.1.2 tidak mendukung penyeretan; saat menyeret elemen, peristiwa ondragover dipicu setiap 350 milidetik.
Contohnya adalah sebagai berikut:
<!DOCTYPE html><html lang=en><head> <meta charset=UTF-8> <meta name=viewport content=width=device-width, initial-scale=1.0> <meta http-equiv=X-UA -Konten yang kompatibel=ie=Edge> <title>Contoh ringkas seret dan lepas selama 5 menit</title> <style> #draggable { lebar: 200 piksel tinggi: 20 piksel; perataan teks: tengah; latar belakang: putih; } .dropzone { lebar: 200 piksel; tinggi: 20 piksel; latar belakang: blueviolet; margin-bawah: 10 piksel; .addEventListener(dragstart, fungsi (acara) { console.log('==========dragstart Mulai diseret==========Penyeretan hanya dilakukan sekali'); // Simpan referensi elemen yang diseret (ref.) drag = event.target; // Jadikan tembus event.target . style.opacity = .5; }, false); /* Peristiwa drag dipicu ketika elemen target diseret*/ document.addEventListener(drag, function (event) { // console.log('==========drag==========Drag akan terus memantau hingga elemen dijatuhkan' }, false /* Saat menempatkan target elemen Pemicu peristiwa */ document.addEventListener(dragover, function (event) { // console.log('==========dragover========== Akan selalu mendengarkan saat menyeret, Hingga elemen dihilangkan'); // Cegah tindakan default untuk mengaktifkan drop event.preventDefault(); }, false); document.addEventListener(dragenter, function (event) { console.log('==========dragenter menyeret elemen ke elemen target==========sesuai to dragleave '); // Sorot node target ketika elemen yang dapat diseret memasuki dropzone if (event.target.className == dropzone) { event.target.style.background = ungu } }, false); document.addEventListener(dragleave, function (event) { console.log('==========dragleave menyeret elemen menjauh dari elemen target===========sesuai dengan dragenter') ; // Ketika elemen yang diseret meninggalkan node target yang dapat dijatuhkan, setel ulang latar belakangnya if (event.target.className == dropzone) { event.target.style.background = ; } }, document.addEventListener(drop, function (peristiwa ) { console.log('==========drop drop element==========Drag hanya dijalankan satu kali, dipicu sebelum dragenter'); Tautan ke beberapa elemen) event.preventDefault(); // Pindahkan elemen yang diseret ke node zona pelepasan yang dipilih if (event.target.className == dropzone) { event.target.style.background = ; diseret); event.target.appendChild(diseret); } }, document.addEventListener(dragend, function (event) { console.log('==========dragend berakhir drag====== =====Penarikan hanya dijalankan sekali'); //Reset transparansi event.target.style.opacity = ; }, false); div id=dapat diseret draggable=true ondragstart=event.dataTransfer.setData('text/plain',null)> Ini adalah DIV yang dapat diseret </div> </div> <div class=dropzone></div> <div class= zona drop ></div> <div class=dropzone></div></body></html>Di atas adalah keseluruhan isi artikel ini, saya harap dapat bermanfaat untuk pembelajaran semua orang. Saya juga berharap semua orang mendukung VeVb Wulin Network.