Beranda>Tutorial Desain Web>tutorial HTML

Penjelasan terperinci dan kode contoh HTML5

Penulis：Eve Cole Waktu Pembaruan：2025-02-04 12:24:01
Pendahuluan singkat

Seret dan drop adalah fitur umum, yaitu, seret ke posisi lain setelah objek penangkapan.

Di HTML5, seret dan drop adalah bagian standar, dan elemen apa pun dapat diseret dan dijatuhkan.

Pertama klik contoh kecil: jalankan javascript saat pengguna mulai menyeret elemen <p>

 <p draggable = true ontdragStart = myfunction (event)> seret saya!

Tip: Tautan dan gambar diseret secara default dan tidak perlu properti yang dapat diseret.

Definisi dan penggunaan

Peristiwa berikut akan dipicu selama proses drag and drop:

  • Memicu acara (elemen sumber): onsdragStart -User -Ketika pengguna mulai menyeret elemen
    • Ondrag -Element dipicu saat menyeret
    • OnDragend -User Penyelesaian Elemen Penyelesaian Trigger
  • Peristiwa dipicu saat melepaskan target: onsdragenter -Ketika objek yang diseret oleh mouse memasuki wadah, itu memicu acara ini
    • 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
Dukungan Browser

Internet Explorer 9+, Firefox, Opera, Chrome, dan Safari Dukungan Menyeret.

Catatan: Safari 5.1.2 tidak mendukung seret; saat menyeret elemen, acara OnDragover akan dipicu setiap 350 milidetik.

Contoh

Posting kode terlebih dahulu, dan kemudian jelaskan satu per satu:

 <! Perbatasan: 1px solid #aaaaaa;} </tyle> </head> <body> <p> Menyeret gambar img_w3slogo.gif ke kotak persegi panjang: </p> <div id = div1 onsdrop = drop (peristiwa) oncragover = alldrop (Bahkan t)> </div> <br> <img id = drag1 src = gambar/img_w3slogo. Ev.preventDefalt ();} function drag (ev) {ev.dataTransfer.setData (Text, ev.target.id);} drop (EV) {ev.preventDefault (); ;

Efek halaman sebelum menyeret adalah:

Mari kita analisis arti kode berikut di bawah ini.

Atur elemen dapat diseret dan dijatuhkan

Pertama -tama, untuk membuat elemen diseret, atur properti yang dapat diseret ke true:

 <Img draggable = true>
What To Drag-ondragStart dan setData ()

Kemudian ditentukan apa yang terjadi ketika elemen diseret.

Dalam contoh di atas, properti OnDragStart memanggil fungsi, seret (peristiwa), yang menentukan data yang diseret.

Metode DataTransfer.SetData () Atur tipe data dan nilai data seret data:

 Function drag (ev) {ev.datatransfer.setData (text, ev.target.id);}

Dalam contoh ini, tipe data adalah teks, dan nilainya adalah ID (drag1) yang dapat menyeret elemen.

Di mana untuk meletakkannya-ondragover

Acara OnDragover menetapkan di mana harus menempatkan data yang diseret.

Default, data/elemen tidak dapat ditempatkan di elemen lain. Jika Anda perlu mengatur penempatan yang diijinkan, kami harus mencegah pemrosesan elemen default.

Ini untuk menghubungi metode event.preventdefault () dari acara OnDragover: :):

 event.preventdefault ()
Put-ondrop

Ketika data seret ditempatkan, peristiwa drop terjadi.

Dalam contoh di atas, atribut OnDrop memanggil fungsi, drop (acara):

 Function drop (ev) {ev.preventdefault ();

Penjelasan Kode:

  • Hubungi preventDefault () untuk menghindari pemrosesan data default browser (perilaku default acara drop dibuka di tautan)
  • Dapatkan data yang diseret melalui metode DataTransfer.getData (Teks). Metode ini akan kembali ke data apa pun dari jenis yang sama dalam metode setData ().
  • Data seret adalah ID dari elemen seret (drag1)
  • Elemen seret tambahan ke elemen penempatan (elemen target)

Hasil implementasi seperti yang ditunjukkan pada gambar:

Objek DataTransfer

Selama operasi seret, kita dapat menggunakan objek DataTransfer untuk mengirimkan data untuk melakukan operasi lain pada data saat operasi seret selesai.

Atribut Objek:

  • Dropeffect: Atur atau kembalikan perilaku seret dan jatuhkan yang terjadi pada target seret dan lepas. Jika perilaku seret dan jatuhkan di sini tidak lagi berada dalam berbagai pengaturan perilaku seret dan jatuhkan yang ditetapkan oleh pengaturan atribut yang efektif, operasi seret dan jatuhkan akan gagal. Nilai atribut ini hanya satu dari empat nilai null, salin, tautan dan bergerak.
  • EffectAllowed: Atur atau kembalikan perilaku seret yang diizinkan oleh elemen seret. Nilai atribut ini dapat diatur ke None, Copy, Copylink, Copymove, Link, LinkMove, Move, All, dan Uninisialisasi.
  • Item: Atribut ini mengembalikan objek DataTransferitems, yang mewakili data seret.
  • Jenis: Atribut ini mengembalikan objek DomStringList, yang mencakup semua jenis data yang disimpan dalam data dalam DataTransfer.
Metode objek:

  • SetData (format, data): Tetapkan data dalam format yang ditentukan ke objek DataTransfer.
  • GetData (format): Dapatkan data dalam format yang ditentukan dari objek DataTransfer, format mewakili format data, data adalah data.
  • ClearData ([Format]): Hapus data format yang ditentukan dari objek DataTransfer.
  • AddElement (Elemen): Tambahkan ikon khusus
  • SetDragimage (elemen, x, y): atur ikon khusus dari operasi drag and lop. Di antara mereka, elemen menetapkan ikon khusus, X mengatur jarak antara ikon dan mouse ke arah horizontal, dan jarak antara ikon dan mouse ke arah vertikal.
Identifikasi apa yang bisa ditarik

 Fungsi dragstart_handler (EV) {console.log (dragStart); = p1 draggable = true ontdragStart = dragStart_handler (event);> elemen ini dapat ditarik
Tentukan data drag

 Fungsi dragstart_handler (EV) {// Tambahkan Data Drag EV.DataTransfer.SetData (Teks/Polos, EV.Target.ID); ;
Tentukan gambar seret

 Fungsi DragStart_handler (EV) {// Buat gambar dan kemudian gunakan untuk gambar seret. ();
Tentukan Efek Seret

 Fungsi dragstart_handler (ev) {// atur efek seret untuk menyalin ev.datatransfer.dropeffect = copy;}
Tentukan zona drop

 Function dragover_handler (ev) {ev.preventdefault (); Elemen ke data dominasi target = ev.datatransfer.getData (teks); Div> </body>
Masalah menyeret browser firefox

Tapi buka di sini dan temukan masalah di browser Firefox:

Seret HTML5 menggunakan PreventDefault untuk mencegah halaman pop -up bermunculan, tetapi tidak berfungsi di bawah Firefox?

Larutan:

 document.ondrop = function (event) {event.preventdefault ();

Atau untuk contoh di atas, dimungkinkan juga untuk ditambahkan ke metode OnDrop:

 Function Drop (EV) {EV.PreventDefault ();

Di atas adalah semua isi artikel ini.

Artikel Terkait