HTML - Drag and Drop API: Panduan untuk Pemula

Halo sana, para pengembang web masa depan! Hari ini, kita akan memulai perjalanan menarik ke dunia API Drag and Drop HTML5. Sebagai guru komputer tetangga yang ramah, saya di sini untuk mengarahkan Anda melalui fitur menarik ini yang dapat membuat halaman web Anda lebih interaktif dan user-friendly. Jadi, ambil minumannya yang favorit, duduk nyaman, dan mari kita masuk ke dalam!

Apa itu API Drag and Drop?

Sebelum kita mulai menggeser dan meletakkan elemen seperti para ahli digital, mari kita mengerti apa saja API ini. API Drag and Drop (DnD) memungkinkan kita membuat elemen HTML dapat digeser, artinya pengguna dapat mengklik pada elemen, menggesernya ke lokasi baru, dan meletakkannya di sana. Itu seperti memberikan superpower ke elemen halaman web Anda!

Membuat Elemen Dapat Digeser

Mari kita mulai dengan dasar. Untuk membuat elemen dapat digeser, kita perlu menggunakan atribut draggable. Itu sangat sederhana, hanya tambahkan atribut ini ke setiap elemen HTML yang Anda inginkan pengguna untuk dapat menggerakkan.

<div draggable="true">Geser saya!</div>

Dalam contoh ini, kita membuat elemen <div> dan membuatnya dapat digeser dengan menetapkan draggable="true". Sekarang, pengguna dapat mengklik div ini dan menggesarnya di sepanjang halaman. Menarik, kan?

Tunggu, ada lagi! Menjadikan elemen dapat digeser saja tidak cukup. Kita perlu menambahkan beberapa JavaScript untuk mengendalikan apa yang terjadi saat elemen digeser dan dilepas. Itu di mana event drag dan drop kami berguna.

Event Drag and Drop

API Drag and Drop menyediakan beberapa event yang kita dapat mendengarkan dan merespon. Event ini memungkinkan kita mengendalikan seluruh proses drag and drop. Mari kita lihat event utama:

Nama Event	Deskripsi
dragstart	Terjadi saat pengguna mulai menggeser elemen
drag	Terjadi secara berkelanjutan saat pengguna menggeser elemen
dragenter	Terjadi saat elemen yang digeser memasuki target drop yang valid
dragover	Terjadi secara berkelanjutan saat elemen yang digeser berada di atas target drop yang valid
dragleave	Terjadi saat elemen yang digeser meninggalkan target drop yang valid
drop	Terjadi saat pengguna melepaskan elemen
dragend	Terjadi saat operasi geser berakhir (baik sukses atau tidak)

Sekarang, mari kita lihat bagaimana kita dapat menggunakan event ini dalam praktek:

<div id="draggable" draggable="true">Geser saya!</div>
<div id="droppable">Letakkan di sini!</div>

<script>
const draggable = document.getElementById('draggable');
const droppable = document.getElementById('droppable');

draggable.addEventListener('dragstart', (e) => {
console.log('Mulai geser');
});

droppable.addEventListener('dragover', (e) => {
e.preventDefault(); // Perlu untuk mengijinkan drop
console.log('Menggeser di atas zona drop');
});

droppable.addEventListener('drop', (e) => {
e.preventDefault();
console.log('Dilepaskan!');
droppable.appendChild(draggable);
});
</script>

Dalam contoh ini, kita membuat dua elemen <div>: satu yang dapat digeser dan satu yang dapat menerima drop. Kita menambahkan listener event untuk dragstart, dragover, dan drop. Saat Anda menggeser elemen dan meletakkannya di zona drop, Anda akan melihat pesan di console, dan elemen yang digeser akan dipindahkan ke zona drop.

Objek DataTransfer

Sekarang, mari kita bicarakan tentang alat kuat di dalam peralatan drag and drop kita: objek DataTransfer. Objek ini digunakan untuk menahan data yang sedang digeser selama operasi drag and drop. Itu memungkinkan kita untuk menyetel dan mendapatkan informasi tentang operasi geser.

Ini adalah cara kita menggunakan itu:

<div id="draggable" draggable="true">Geser saya!</div>
<div id="droppable">Letakkan di sini!</div>

<script>
const draggable = document.getElementById('draggable');
const droppable = document.getElementById('droppable');

draggable.addEventListener('dragstart', (e) => {
e.dataTransfer.setData('text/plain', e.target.id);
});

droppable.addEventListener('dragover', (e) => {
e.preventDefault();
});

droppable.addEventListener('drop', (e) => {
e.preventDefault();
const data = e.dataTransfer.getData('text');
const draggedElement = document.getElementById(data);
e.target.appendChild(draggedElement);
});
</script>

Dalam contoh ini, kita menggunakan setData() untuk menyimpan ID elemen yang digeser saat drag dimulai. Kemudian, di event drop, kita mengambil data ini menggunakan getData() dan menggunakannya untuk memindahkan elemen yang digeser.

Proses Drag and Drop

Sekarang kita telah melihat bagian-bagian individual, mari kita jelajahi seluruh proses drag and drop:

1. Mulai Geser: Pengguna mengklik pada elemen yang dapat digeser dan mulai menggeser.
2. Menggeser: Saat pengguna memindahkan mouse, event drag terjadi secara berkelanjutan.
3. Memasuki Zona Drop: Saat elemen yang digeser memasuki zona drop yang valid, event dragenter terjadi.
4. Di Atas Zona Drop: Saat elemen yang digeser berada di atas zona drop, event dragover terjadi secara berkelanjutan.
5. Meninggalkan Zona Drop: Jika elemen yang digeser meninggalkan zona drop, event dragleave terjadi.
6. Drop: Saat pengguna melepaskan tombol mouse untuk meletakkan elemen, event drop terjadi.
7. Akhir Geser: Akhirnya, event dragend terjadi untuk menandai akhir operasi geser.

Dalam contoh ini, kita telah implementasikan semua event drag and drop. Kita mengubah keopakaran elemen yang digeser saat sedang digeser, menandai zona drop saat elemen digeser di atasnya, dan memindahkan elemen yang digeser ke zona drop saat dilepaskan.

Dan itu adalah dia, teman-teman! Anda telah belajar dasar API Drag and Drop HTML5. Dengan pengetahuan ini, Anda dapat membuat elemen interaktif di halaman web Anda yang dapat digeser dan dilepaskan. Ingat, latihan membuat sempurna, jadi jangan takut untuk mencoba dan membuat proyek drag and drop Anda sendiri.

Saat kita mengakhiri pelajaran ini, saya teringat kata-kata bijak oleh Bruce Lee: "Saya takutkan pria yang telah mempraktikkan 10.000 tendangan sekali, tapi saya takutkan pria yang telah mempraktikkan satu tendangan 10.000 kali." Jadi, maju dan latih keterampilan drag and drop Anda. Sebelum Anda tahu, Anda akan menciptakan pengalaman web interaktif yang akan membuat pengguna Anda terkesan!

Happy coding, dan semoga elemen Anda selalu jatuh di tempat yang Anda inginkan!

Credits: Image by storyset