HTML - Drag and Drop API: Panduan Pemula

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

Apa Itu API Drag and Drop?

Sebelum kita mulai menggeser dan meletakkan elemen seperti ahli digital, mari kita pahami apa itu API ini. API Drag and Drop (DnD) memungkinkan kita untuk membuat elemen HTML dapat digeser, artinya pengguna dapat mengklik pada elemen, geser ke lokasi baru, dan meletakkan disana. Itu seperti memberikan elemen halaman web Anda kekuatan super!

Membuat Elemen Bisa Digeser

Mari kita mulai dari dasar. Untuk membuat elemen dapat digeser, kita perlu menggunakan atribut draggable. Itu sama mudah seperti menambahkan atribut ini ke elemen HTML apa pun yang Anda inginkan pengguna untuk dapat memindahkan.

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

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

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

Event Drag and Drop

API Drag and Drop menyediakan beberapa event yang kita dapat dengarkan dan merespon. Event ini memungkinkan kita untuk 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 meletakkan 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('Geser dimulai');
});

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

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

Dalam contoh ini, kita telah membuat dua elemen <div>: satu yang dapat digeser dan satu yang dapat diletakkan. Kita menambahkan listener event untuk dragstart, dragover, dan drop. Saat Anda menggeser elemen dan meletakannya di zona drop, Anda akan melihat pesan di konsol, 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 menyimpan data yang sedang digeser saat operasi drag and drop. Itu memungkinkan kita untuk menetapkan dan mendapatkan informasi tentang operasi geser.

Ini adalah cara kita menggunakannya:

<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, dalam event drop, kita mengambil data ini menggunakan getData() dan menggunakannya untuk memindahkan elemen yang digeser.

Proses Drag and Drop

Sekarang kita telah menutupi bagian individual, mari kita jalankan seluruh proses drag and drop:

1. Mulai Geser: Pengguna mengklik pada elemen yang dapat digeser dan mulai menggeser.
2. Geser: 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. Meletakkan: 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 keopakannya elemen yang digeser saat dalam proses drag, menandai zona drop saat elemen digeser di atasnya, dan memindahkan elemen yang digeser ke zona drop saat itu dilepaskan.

Dan begitu saja, 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 ini, saya ingat kata-kata bijak dari Bruce Lee: "Saya takutkan orang yang telah melatih 10.000 tendangan sekali, tapi saya takutkan orang yang telah melatih satu tendangan 10.000 kali." Jadi, pergi dan latih keterampilan drag and drop Anda. Sebelum Anda sadari, Anda akan membuat pengalaman web interaktif yang memukul hati pengguna Anda!

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

Credits: Image by storyset