API seret dan lepas (DnD) HTML5 berarti bahwa hampir semua elemen pada halaman dapat menjadi dapat diseret. Pada artikel ini, kita akan membahas dasar-dasar seret dan lepas.
Buat konten yang dapat diseret
Perlu dicatat bahwa di sebagian besar browser, pilihan teks, gambar, dan tautan dapat diseret secara default. Misalnya, jika Anda menyeret logo Google di Google Penelusuran, Anda akan melihat gambar hantu. Gambar kemudian dapat diseret dan dijatuhkan ke bilah alamat, elemen <input type="file" />, atau bahkan di desktop. Untuk membuat jenis konten lain dapat diseret, Anda perlu menggunakan API DnD HTML5.
Untuk membuat objek dapat diseret, atur elemendapat diseret=benar。 Seret dapat didukung untuk hampir semua elemen, termasuk gambar, file, tautan, file, atau markup apa pun di halaman.
Dalam contoh kita, kita akan membuat antarmuka untuk mengatur ulang beberapa kolom, yang telah ditata melalui CSS Grid. Markup dasar untuk kolom ini ditampilkan di bawah ini, dengan properti yang dapat diseret diatur ke true untuk setiap kolom.
Berikut adalah CSS untuk elemen kontainer dan kotak saya. Perhatikan bahwa satu-satunya CSS yang terkait dengan fungsionalitas DnD adalah properti kursor: pindahkan. Kode lainnya hanya mengontrol tata letak dan gaya elemen kontainer dan kotak.
Pada titik ini, Anda akan melihat bahwa Anda dapat menyeret item tetapi tidak ada hal lain yang akan terjadi. Untuk menambahkan fungsionalitas DnD, kita perlu menggunakan API JavaScript.
Mendengarkan peristiwa seret
Banyak peristiwa berbeda dapat dilampirkan untuk memantau seluruh proses seret dan lepas.
- Seret mulai
- tarik
- seret masuk
- Dragleave
- seret
- menjatuhkan
- seret
Untuk memproses aliran DnD, Anda memerlukan semacam elemen sumber (titik awal seret), muatan data (apa yang Anda coba tempatkan), dan target (area tempat penempatan jepretan). Elemen sumber dapat berupa gambar, daftar, tautan, objek file, blok HTML, dll. Tujuannya adalah untuk menerima zona drop (atau kumpulan zona drop) dari data yang coba ditempatkan pengguna. Perlu diingat bahwa tidak semua elemen bisa menjadi tujuan, misalnya, gambar tidak bisa menjadi tujuan.
Memulai dan mengakhiri urutan seret dan lepas
Setelah menentukan properti draggable="true" pada konten, lampirkan penanganan peristiwa dragstart untuk memulai urutan DnD untuk setiap kolom.
Kode ini akan mengatur opasitas kolom ke 40% saat pengguna mulai menyeret, lalu mengembalikannya ke 100% di akhir peristiwa seret.
Hasilnya dapat dilihat pada demo Glitch di bawah ini. Seret item dan item akan menjadi buram. Karena peristiwa dragstart menargetkan elemen sumber, mengatur this.style.opacity ke 40% memberikan umpan balik visual pengguna bahwa elemen yang saat ini dipilih sedang bergerak. Setelah item ditempatkan, elemen sumber kembali ke opasitas 100%, meskipun fungsi penempatan belum ditulis.
Gunakan dragenter, dragover, dan dragleave untuk menambahkan isyarat visual tambahan
Untuk membantu pengguna memahami cara berinteraksi dengan antarmuka Anda, gunakan penanganan peristiwa dragenter, dragover, dan dragleave. Dalam contoh berikut, kolom dapat diseret atau ditargetkan. Untuk membantu pengguna memahami hal ini, saat pengguna menyeret item melewati kolom, batas kolom tersebut menjadi garis putus-putus. Misalnya, Anda dapat membuat over class di CSS untuk mewakili elemen yang merupakan target penempatan:
Kemudian, siapkan penanganan peristiwa di JavaScript untuk menambahkan kelas over saat menyeret melewati kolom dan menghapusnya saat keluar. Di dragend handler, kami juga ingin memastikan bahwa kelas dihapus di akhir drag.
Ada beberapa poin yang perlu disebutkan dalam kode ini:
Saat menyeret elemen seperti tautan, Anda perlu memblokir perilaku default browser, yaitu menavigasi ke tautan tersebut. Untuk melakukan ini, panggil e.preventDefault() dalam peristiwa dragover. Praktik baik lainnya adalah mengembalikan false di handler yang sama.
Gunakan penanganan peristiwa dragenter untuk mengalihkan kelas, bukan seret. Jika Anda menggunakan dragover, kelas CSS dialihkan beberapa kali karena peristiwa dragover terus terpicu saat kolom melayang. Pada akhirnya, ini akan menyebabkan perender browser melakukan banyak pekerjaan yang tidak perlu. Yang terbaik adalah selalu menggambar ulang seminimal mungkin. Jika Anda perlu menggunakan peristiwa dragover karena alasan tertentu, pertimbangkan untuk membatasi atau menghapus pemroses peristiwa.
Selesaikan penempatan
Untuk menangani penempatan aktual, tambahkan pemroses peristiwa untuk peristiwa drop. Dalam penangan jatuh, Anda perlu memblokir perilaku penempatan default browser, yang biasanya semacam pengalihan yang mengganggu. e.stopPropagation() dapat dipanggil untuk mencegah peristiwa memicu DOM.
Pastikan untuk mendaftarkan handler baru di handler lainnya:
Jika Anda menjalankan kode saat ini, proyek tidak akan ditempatkan di lokasi baru. Untuk mencapai ini, Anda perlu menggunakan objek DataTransfer.
Properti dataTransfer adalah tempat semua keajaiban DnD terjadi. Ini menyimpan fragmen data yang dikirim dalam operasi seret. dataTransfer diatur dalam peristiwa dragstart dan dibaca/diproses dalam peristiwa drop. Panggil e.dataTransfer.setData(mimeType, dataPayload) untuk mengatur jenis MIME dan payload data objek.
Dalam contoh berikut, kami akan mengizinkan pengguna untuk mengatur ulang urutan kolom. Untuk melakukan ini, pertama-tama Anda perlu menyimpan HTML elemen sumber di awal drag:
Tangani penempatan kolom dalam peristiwa drop, atur HTML kolom sumber ke HTML kolom target tempat kolom tersebut ditempatkan, periksa terlebih dahulu apakah kolom target yang diseret dan dilepas oleh pengguna sama dengan kolom sumber.
Properti seret lainnya
Objek dataTransfer mengekspos properti yang digunakan untuk memberikan umpan balik visual kepada pengguna selama proses penyeret. Properti ini juga dapat digunakan untuk mengontrol bagaimana setiap target penempatan merespons tipe data tertentu.
- dataTransfer.effectAllowed membatasi "jenis seret" yang dapat dilakukan pengguna pada suatu elemen. Ini digunakan dalam model penanganan seret dan lepas untuk menginisialisasi dropEffect selama peristiwa dragenter dan dragover. Properti ini dapat diatur ke nilai berikut: none, copy, copyLink, copyMove, link, linkMove, move, all, dan uninitialized.
- dataTransfer.dropEffect mengontrol umpan balik yang diberikan kepada pengguna selama peristiwa dragenter dan dragover. Saat pengguna mengarahkan kursor ke elemen target, kursor browser akan menunjukkan jenis tindakan yang akan dilakukan (misalnya, menyalin, memindahkan, dll.). Efeknya bisa berupa salah satu nilai berikut: tidak ada, salin, tautkan, pindahkan.
- e.dataTransfer.setDragImage(imgElement, x, y) menunjukkan bahwa umpan balik "gambar hantu" default browser tidak digunakan, dan sebagai gantinya ada opsi untuk mengatur ikon seret.
Unggah file dengan menyeret dan melepas
Contoh sederhana berikut menggunakan kolom sebagai sumber seret dan target seret. Hal ini dapat dilihat di UI saat pengguna diminta untuk mengatur ulang item. Dalam beberapa kasus, menyeret target dan menyeret sumber mungkin berbeda, seperti di antarmuka di mana pengguna perlu memilih gambar sebagai gambar utama produk dengan menyeret gambar yang dipilih ke target.
Seret dan lepas sering digunakan untuk memungkinkan pengguna menyeret item dari desktop ke aplikasi. Perbedaan utamanya adalah penangan jatuh. Tanpa menggunakan dataTransfer.getData() untuk mengakses file, data file akan disertakan dalam properti dataTransfer.files:
Tautan asli:Login hyperlink terlihat.
|
Dipaparkan pada 2022-4-26 10:30:50
|
|
|
|
Dipaparkan pada 2022-4-26 21:27:25
|
