Drag & Drop di Web? Begini Cara Keren Biar Bisa!

Drag and Drop (seret dan lepas) adalah salah satu fitur interaktif yang sering digunakan dalam aplikasi web modern. Dengan fitur ini, pengguna bisa memindahkan elemen dari satu tempat ke tempat lain dengan cara menyeret dan melepaskannya. Contohnya, dalam aplikasi seperti Trello, Google Drive, atau bahkan saat mengunggah file di berbagai platform.

Dengan JavaScript, kita bisa membuat fitur drag and drop yang interaktif menggunakan event bawaan seperti dragstart, dragover, drop, dan dragend. Yuk, kita pelajari cara membuatnya!

Event dalam Drag & Drop

Untuk membuat fitur drag and drop, kita perlu memahami beberapa event utama dalam JavaScript:

Cara Membuat Drag & Drop

1. Menjadikan Elemen Bisa Diseret

Pertama, kita perlu menentukan elemen mana yang bisa diseret. Ini dilakukan dengan menambahkan atribut draggable="true" pada elemen tersebut.

<div id="dragItem" draggable="true">Seret Saya!</div>

Kemudian, kita tangani event dragstart di JavaScript:

document.getElementById("dragItem").addEventListener("dragstart", function(event) {
    event.dataTransfer.setData("text/plain", event.target.id);
    console.log("Elemen mulai diseret");
});

Kode ini memungkinkan elemen untuk diseret dan menyimpan ID elemen ke dalam dataTransfer.

2. Membuat Area Target untuk Drop

Selanjutnya, kita buat area target tempat elemen bisa dijatuhkan:

<div id="dropZone" style="width: 200px; height: 200px; border: 2px dashed #000; margin-top: 20px;">
    Lepaskan di sini
</div>

Sekarang kita tambahkan event dragover agar area target bisa menerima elemen yang diseret:

document.getElementById("dropZone").addEventListener("dragover", function(event) {
    event.preventDefault();
});

Tanpa event.preventDefault(), elemen yang diseret tidak akan bisa dilepaskan di area ini.

3. Menangani Event Drop

Sekarang kita tambahkan event drop agar elemen yang diseret bisa berpindah ke dalam area target:

document.getElementById("dropZone").addEventListener("drop", function(event) {
    event.preventDefault();
    const id = event.dataTransfer.getData("text");
    const draggedElement = document.getElementById(id);
    event.target.appendChild(draggedElement);
    console.log("Elemen berhasil dipindahkan!");
});

Kode ini mengambil ID elemen yang diseret, lalu menambahkannya ke dalam dropZone.

Menambahkan Efek Visual Saat Dragging

Agar tampilan lebih menarik, kita bisa menambahkan efek saat elemen sedang diseret dengan dragover dan dragend.

document.getElementById("dragItem").addEventListener("dragstart", function(event) {
    event.target.style.opacity = "0.5";
});

document.getElementById("dragItem").addEventListener("dragend", function(event) {
    event.target.style.opacity = "1";
});

Saat elemen mulai diseret, opasitasnya akan berkurang, dan setelah dilepas, akan kembali normal.

Menggunakan Drag & Drop untuk Upload File

Selain elemen biasa, kita juga bisa menggunakan drag and drop untuk upload file. Ini berguna dalam aplikasi yang mendukung unggahan file, seperti Google Drive.

<div id="dropFileZone" style="width: 300px; height: 200px; border: 2px dashed #000; text-align: center; padding: 20px;">
    Seret dan lepas file di sini
</div>

Kode JavaScript untuk menangani upload file:

document.getElementById("dropFileZone").addEventListener("dragover", function(event) {
    event.preventDefault();
});

document.getElementById("dropFileZone").addEventListener("drop", function(event) {
    event.preventDefault();
    const files = event.dataTransfer.files;
    console.log("File yang diunggah:", files);
});

Ketika file diseret ke dalam area, kita bisa mengakses daftar file tersebut melalui event.dataTransfer.files.

Kapan Harus Menggunakan Drag & Drop?

✅ Jika ingin membuat fitur interaktif seperti daftar tugas atau kartu yang bisa dipindah-pindah.
✅ Jika ingin membuat pengalaman unggah file yang lebih mudah.
✅ Jika ingin memungkinkan pengguna untuk mengorganisir elemen dalam halaman dengan bebas.
❌ Jangan gunakan jika tombol atau input biasa sudah cukup untuk tugas yang sama.

Kesimpulan

• Drag & Drop memungkinkan pengguna untuk memindahkan elemen dengan interaksi yang lebih alami.
• Menggunakan event seperti dragstart, dragover, drop, dan dragend, kita bisa mengontrol proses ini dengan JavaScript.
• Bisa diterapkan untuk berbagai kebutuhan, dari memindahkan elemen dalam halaman hingga mengunggah file.
• Tambahkan efek visual untuk meningkatkan pengalaman pengguna.

Dengan memahami cara kerja drag & drop, kita bisa membuat halaman web yang lebih dinamis, interaktif, dan menyenangkan untuk digunakan!