API drag and drop adalah fitur baru HTML5. Dibandingkan dengan fitur baru lainnya, API ini menyumbang 60% kepentingan dan 30% penggunaan dalam pengembangan sebenarnya.
2. Apa itu seret dan lepaskan?Seret: Seret
Rilis: Jatuhkan
Menyeret artinya mouse mengklik objek sumber dan terus menggerakkan objek tanpa melepaskannya.
3. Apa yang dimaksud dengan objek sumber dan objek target?Objek sumber: mengacu pada sesuatu yang kita klik dengan mouse. Bisa berupa gambar, DIV, sepotong teks, dll.
Objek target: mengacu pada saat kita menyeret objek sumber dan memindahkannya ke suatu area. Objek sumber dapat memasuki area ini, mengarahkan kursor ke area ini (tanpa melepaskannya), dan melepaskan objek sumber di sini (sudah melepaskannya). juga dapat meninggalkan area tersebut setelah melayang.
4. Fungsi terkait API drag and dropSetelah menjelaskan apa itu objek sumber dan objek target, mari kembali ke API drag and drop di front end. Dari operasi di atas, kita dapat memperoleh beberapa fungsi
Peristiwa yang dapat dipicu oleh objek sumber yang diseret:
(1)ondragstart: Objek sumber mulai diseret
(2)ondrag: Objek sumber sedang diseret (mouse mungkin bergerak atau tidak)
(3)ondragend: Objek sumber diseret hingga akhir
Tarik objek sumber untuk memasukkan kejadian yang dapat dipicu oleh objek target di atas:
(1)ondragenter: Objek target diseret ke objek sumber
(2) ondragover: Objek target diseret oleh objek sumber dan melayang di atasnya.
(3)ondragleave: Objek sumber diseret menjauh dari objek target
(4)ondrop: Tarik objek sumber dan lepaskan/lepaskan ke atas objek target
API drag and drop memiliki total 7 fungsi! !
5. Bagaimana cara mentransfer data antara event objek sumber yang diseret dan event objek targetHTML5 menyediakan atribut baru untuk semua peristiwa terkait drag:
e.dataTransfer { } //数据传递对象
Fungsi: Digunakan untuk meneruskan data antara peristiwa objek sumber dan objek target
Simpan data dalam event handler pada objek sumber:
e.dataTransfer.setData( k, v ); //kv必须都是string类型
Membaca data dalam event handler pada objek target:
var v = e.dataTransfer.getData(k);
Contoh 1: Implementasikan sebuah pesawat kecil yang dapat bergerak saat mouse diseret
Tip: Pesawat harus benar-benar diposisikan! Dapatkan nilai koordinat mouse pada event ondrag! ! !
Kodenya adalah sebagai berikut:
<!DOCTYPE html> <html> <head lang=en> <meta charset=UTF-8> <title></title> <style> body{ margin:0; posisi: relatif; </style> </head> <body> <h3>Pesawat kecil yang bergerak saat mouse diseret</h3> <img id=p3 src=img/p3.png <script> p3.ondragstart=function(e){ console.log('Sumber kejadian p3 mulai menyeret'); //Rekam offset mouse pada bidang setelah menyeret offsetX= e.offsetX; .ondrag=function(e){ console.log('Sumber acara p3 sedang diseret'); var x= e.pageX; console.log(x+'-'+y); //Pada saat terakhir event drag, koordinat mouse tidak dapat dibaca, dan pageX dan pageY menjadi 0 if(x==0 && y==0 ){ return; // Jangan menangani situasi di mana X dan Y sama-sama 0 pada saat terakhir menyeret} x-=offsetX; y-=offsetY; atas=y+'px'; p3.ondragend=function(){ console.log('Objek sumber tarikan p3 berakhir');Efeknya adalah sebagai berikut:
Contoh dua:
Mensimulasikan efek tempat sampah di komputer. Sebanyak tiga bidang kecil ditampilkan. Setelah menyeret bidang kecil ke atas tempat sampah, bidang kecil tersebut dihapus dari pohon DOM.
Tip: Penghapusan memerlukan penghapusan elemen dari node anak DOM, dan perilaku default ondragover perlu dicegah! ! Gunakan transfer data antara objek sumber dan objek target untuk mencatat nilai ID pesawat kecil! ! !
Informasi penting:
ondragover memiliki perilaku default! ! ! Saat itulah ondragover dipicu, ondrop akan gagal! ! ! ! Ini mungkin masalah versi browser, yang hanya dapat diselesaikan jika browser terus diperbarui di masa mendatang! !
Bagaimana cara menghentikannya?
ondragover= function(e){ //Ketika objek sumber melayang di atas objek target e.preventDefault(); //Mencegah perilaku default sehingga drop dapat terpicu...}ondrop= function(e){ // The objek sumber dilepaskan di objek target...}Kodenya adalah sebagai berikut:
<!DOCTYPE html> <html> <head lang=en> <meta charset=UTF-8> <title></title> <style> body { text-align: center; } #trash { opacity: .2; : 15px; } </style> </head> <body> <h3>Hapus elemen anak dari pohon DOM setelah menyeret bidang ke tempat sampah</h3> <img id=trash src=img/trash_full.png> <hr/> <img id=p3 class=src src=img/p3.png> <img id=p4 class=src src=img/p4.png> <img id=p5 class =src src=img/p5.png> <script> //Tambahkan pemantauan peristiwa untuk objek sumber - catat var objek sumber mana yang diseret srcList = document.querySelectorAll('.src');//Temukan semua elemen img untuk(var i=0; i<srcList.length; i++){ //Melintasi elemen img var p = srcList[i]; = function(e){ //Mulai menyeret objek sumber e.dataTransfer.setData('PlaneID',this.id); //Simpan data--id elemen img } p.ondrag = function(){} p.ondragend = function(){} } //Menambahkan event yang mendengarkan objek target - menghapus objek sumber yang diseret sampah.ondragenter = function(){ //Objek sumber memasuki target objek console .log('drag enter'); sampah.gaya.opacity = 1; //Ubah transparansi menjadi 1 } sampah.ondragleave= function(){ //Setelah objek sumber meninggalkan objek target, console.log(' tarik keluar'); sampah.gaya.opacity = .2; //Ubah transparansi menjadi 0.2 } sampah.ondragover= function(e){ //Objek sumber melayang di atas objek target e.preventDefault(); //Mencegah perilaku default, Make drop triggerable} sampah.ondrop= function(e){ //Objek sumber dilepaskan di objek target console.log('drop'); //Hapus objek sumber yang diseret var id = e.dataTransfer.getData('PlaneID'); //Dapatkan data--id value var p = document.getElementById(id); parentNode.removeChild(p); //Hapus node anak dari elemen induk} </script> </body> </html>Efeknya adalah sebagai berikut:
Setelah menyeret pesawat kecil ke tempat sampah untuk menghapus:
Seperti terlihat pada gambar, awalnya ada tiga pesawat kecil, namun sekarang menjadi dua! ! !
6. Poin pengetahuan tambahan tentang drag and drop API! ! (Penting, Anda mungkin ditanya saat wawancara!!)Pertanyaan wawancara:
Bagaimana cara menampilkan gambar dari klien (komputer) di halaman web?
Bagaimana cara menyeret halaman web klien untuk ditampilkan di halaman unduhan sisi server?
Apa maksud kedua pertanyaan ini?
Kami biasanya menarik dan melepas gambar dari komputer ke browser untuk melaksanakan operasi pengunduhan! ! ! Menurut standar sebelum H5, tidak mungkin untuk menarik dan melepas gambar secara langsung ke browser untuk ditampilkan! ! Namun sejak fitur baru H5 keluar, fitur drag and drop API telah ditambahkan, yang mewujudkan fungsi ini dengan sempurna! ! !
Kesempatan aplikasi:
Di situs tertentu, unggah gambar sebagai avatar
Unggah foto...
Objek operasi file baru di HTML5:
File: mewakili objek file
FileList: Mewakili objek daftar file, seperti array
FileReader: digunakan untuk membaca data dari file
FileWriter: digunakan untuk menulis data ke file
Fungsi terkait:
div.ondrop = function(e){var f = e.dataTransfer.files[0]; //Menemukan file yang diseret dan dijatuhkan var fr = new FileReader(); //Baca konten file fr.onload = function(){ //Bacaan selesai img.src = fr.result; //Gunakan data yang telah dibaca} }Kodenya adalah sebagai berikut:
<span style=font-size: 18px;><!DOCTYPE html> <html> <head lang=en> <meta charset=UTF-8> <title></title> <style> #container { batas: 1px solid #aaa; radius batas: 3 piksel; bantalan: 10 piksel; margin: 10 piksel; tinggi minimum: 400 piksel; </style> </head> <body> <h1>Pengetahuan yang diperluas tentang API seret dan lepas</h1> <h3>Silakan seret foto Anda ke area kotak di bawah</h3> <div id=container></ div > <script> //Dengarkan event drop dokumen - batalkan perilaku defaultnya: buka gambar di jendela baru document.ondragover = function(e){ e.preventDefault(); //Aktifkan event drop untuk dipicu } dokumen.ondrop = function(e){ e.preventDefault(); //Mencegah gambar dibuka di jendela baru, jika tidak, operasi pengunduhan akan tetap dilakukan! ! ! } //Dengarkan event drop div#container, coba baca data gambar yang dirilis, dan tampilkan container.ondragover = function(e){ e.preventDefault(); container.ondrop = function(e){ console .log ('Klien menyeret gambar dan melepaskannya...') //Objek target saat ini membaca data yang disimpan dalam objek sumber seret dan lepas //console.log(e.dataTransfer); //Menampilkan masalah //console.log(e.dataTransfer.files.length); //Jumlah gambar yang diseret dalam var f0 = e.dataTransfer.files[0]; /Objek file File //Baca data dari objek file var fr = new FileReader(); //fr.readAsText(f0); //Baca data URL dari file fr.onload = function(){ console.log('Membaca file selesai') console.log(fr.result); ; //data URL container.appendChild(img);Efeknya adalah sebagai berikut:
MeringkaskanDi atas adalah penjelasan rinci tentang contoh klasik API drag and drop HTML5 yang diperkenalkan oleh editor. Saya harap ini dapat membantu Anda. Jika Anda memiliki pertanyaan, silakan tinggalkan pesan kepada saya dan editor akan membalas Anda tepat waktu . Saya juga ingin mengucapkan terima kasih kepada semua orang atas dukungan Anda terhadap situs seni bela diri VeVb!