Menguasai Drag and Drop API: Membangun Antarmuka Interaktif yang Fleksibel dan Aksesibel

1. Pendahuluan

Pernahkah Anda menyeret file dari desktop ke Gmail, mengatur ulang item di papan Kanban, atau memindahkan widget di dashboard yang bisa dikustomisasi? Semua interaksi ini, yang terasa begitu alami dan intuitif, seringkali diimplementasikan menggunakan fitur Drag and Drop. Fitur ini menjadi salah satu pilar penting dalam membangun antarmuka pengguna (UI) yang interaktif dan responsif di aplikasi web modern.

Meskipun banyak library JavaScript yang menawarkan fungsionalitas drag and drop (seperti React Beautiful DND, SortableJS), browser modern sebenarnya menyediakan native Drag and Drop API yang powerful dan fleksibel. Menguasai API ini tidak hanya membantu Anda membangun interaksi yang lebih ringan dan tanpa dependensi eksternal, tetapi juga memberikan pemahaman mendalam tentang bagaimana interaksi kompleks ini bekerja di level browser.

Dalam artikel ini, kita akan menyelami Drag and Drop API secara mendalam. Kita akan belajar bagaimana membuat elemen bisa diseret (draggable), bagaimana menentukan area tempat elemen bisa dijatuhkan (droppable), cara mentransfer data selama proses drag, hingga memastikan implementasi kita tetap performant dan yang paling penting, aksesibel bagi semua pengguna. Mari kita mulai! 🚀

2. Memahami Konsep Dasar Drag and Drop

Sebelum masuk ke kode, mari kita pahami beberapa konsep kunci dalam Drag and Drop API:

Elemen Sumber (Draggable Source): Elemen yang bisa diseret oleh pengguna. Anda harus secara eksplisit menandainya sebagai draggable.
Elemen Target (Droppable Target): Elemen atau area di mana elemen sumber bisa dijatuhkan. Elemen target harus “mengizinkan” proses drop.
Data Transfer (dataTransfer Object): Objek ini adalah jembatan komunikasi antara elemen sumber dan target. Ia membawa data dari elemen yang diseret ke elemen yang akan dijatuhkan. Anda bisa menyimpan berbagai jenis data di sini, mulai dari teks sederhana, URL, hingga representasi objek JSON.
Event-Event Kunci: Proses drag and drop dipicu oleh serangkaian event DOM yang spesifik:
- dragstart: Dipicu saat pengguna mulai menyeret elemen.
- drag: Dipicu secara terus-menerus saat elemen diseret.
- dragenter: Dipicu saat elemen yang diseret memasuki area elemen target.
- dragover: Dipicu secara terus-menerus saat elemen yang diseret berada di atas elemen target. Ini adalah event krusial!
- dragleave: Dipicu saat elemen yang diseret meninggalkan area elemen target.
- drop: Dipicu saat elemen yang diseret dijatuhkan di atas elemen target.
- dragend: Dipicu saat proses drag berakhir, baik itu berhasil di-drop atau dibatalkan.

📌 Penting: Secara default, browser tidak mengizinkan elemen untuk di-drop di atas elemen lain. Anda harus secara eksplisit mencegah perilaku default browser pada event dragover agar drop event bisa diaktifkan.

3. Implementasi Drag and Drop Sederhana

Mari kita buat contoh sederhana: menyeret sebuah item dari satu daftar ke daftar lain.

HTML (index.html)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Drag and Drop Sederhana</title>
    <style>
        body { font-family: sans-serif; display: flex; justify-content: center; gap: 20px; padding: 20px; }
        .container {
            width: 200px;
            min-height: 250px;
            border: 2px dashed #ccc;
            padding: 10px;
            background-color: #f9f9f9;
            border-radius: 8px;
            transition: background-color 0.2s ease;
        }
        .container.drag-over {
            background-color: #e0ffe0;
            border-color: #4CAF50;
        }
        .item {
            background-color: #007bff;
            color: white;
            padding: 10px;
            margin-bottom: 8px;
            border-radius: 4px;
            cursor: grab;
        }
        .item:active {
            cursor: grabbing;
        }
    </style>
</head>
<body>
    <div id="container1" class="container">
        <h3>Daftar 1</h3>
        <div class="item" id="item1" draggable="true">Item A</div>
        <div class="item" id="item2" draggable="true">Item B</div>
    </div>
    <div id="container2" class="container">
        <h3>Daftar 2</h3>
    </div>

    <script src="script.js"></script>
</body>
</html>

JavaScript (script.js)

document.addEventListener('DOMContentLoaded', () => {
    const items = document.querySelectorAll('.item');
    const containers = document.querySelectorAll('.container');

    let draggedItem = null; // Menyimpan referensi item yang sedang diseret

    // ✅ Membuat elemen bisa diseret (draggable)
    items.forEach(item => {
        item.addEventListener('dragstart', (e) => {
            draggedItem = item;
            // Menyimpan ID item ke dataTransfer object
            // 'text/plain' adalah tipe MIME standar untuk teks
            e.dataTransfer.setData('text/plain', item.id);
            // Memberi sedikit delay untuk class agar tidak langsung hilang saat dragstart
            setTimeout(() => {
                item.style.opacity = '0.5'; // Memberi feedback visual bahwa item sedang diseret
            }, 0);
            console.log('dragstart', item.id);
        });

        item.addEventListener('dragend', () => {
            draggedItem.style.opacity = '1'; // Mengembalikan opacity
            draggedItem = null;
            console.log('dragend');
        });
    });

    // ✅ Membuat elemen target bisa menerima drop
    containers.forEach(container => {
        container.addEventListener('dragover', (e) => {
            e.preventDefault(); // ⚠️ Ini sangat penting! Tanpa ini, drop tidak akan bekerja.
            container.classList.add('drag-over'); // Feedback visual untuk area drop
            console.log('dragover', container.id);
        });

        container.addEventListener('dragenter', (e) => {
            e.preventDefault(); // Juga penting untuk dragenter
            console.log('dragenter', container.id);
        });

        container.addEventListener('dragleave', () => {
            container.classList.remove('drag-over');
            console.log('dragleave', container.id);
        });

        container.addEventListener('drop', (e) => {
            e.preventDefault();
            container.classList.remove('drag-over');

            if (draggedItem) {
                // Mendapatkan ID item yang diseret dari dataTransfer
                const data = e.dataTransfer.getData('text/plain');
                const droppedItem = document.getElementById(data);
                
                if (droppedItem && container !== droppedItem.parentNode) { // Pastikan tidak drop di container yang sama
                    container.appendChild(droppedItem); // Memindahkan item ke container baru
                    console.log('drop', droppedItem.id, 'ke', container.id);
                }
            }
        });
    });
});

Coba jalankan index.html ini di browser Anda. Anda akan bisa menyeret “Item A” dan “Item B” antar “Daftar 1” dan “Daftar 2”.

Penjelasan Kode:

draggable="true": Atribut ini pada elemen HTML adalah yang pertama dan terpenting untuk membuat sebuah elemen bisa diseret.
dragstart: Saat drag dimulai, kita menyimpan id item ke dataTransfer object menggunakan e.dataTransfer.setData('text/plain', item.id). Ini adalah data yang akan tersedia bagi elemen target saat di-drop. Kita juga mengubah opasitas untuk feedback visual.
dragover: ⚠️ Ini adalah event yang paling krusial. Kita memanggil e.preventDefault() di sini. Mengapa? Karena secara default, browser tidak mengizinkan elemen untuk dijatuhkan di atas elemen lain. preventDefault() “mengizinkan” drop terjadi. Kita juga menambahkan class drag-over untuk feedback visual.
drop: Saat item dijatuhkan, kita mengambil data yang disimpan di dragstart dengan e.dataTransfer.getData('text/plain'). Kemudian, kita bisa menggunakan data ini (dalam kasus ini, ID item) untuk memanipulasi DOM, yaitu memindahkan droppedItem ke container yang baru.
dragend: Event ini selalu dipicu di akhir proses drag, baik berhasil di-drop atau dibatalkan. Kita mengembalikan opasitas item dan mereset draggedItem.
dragenter dan dragleave: Event-event ini berguna untuk feedback visual saat elemen masuk atau keluar dari area target, seperti menambahkan atau menghapus highlight.

4. Mengelola Berbagai Jenis Data dan File

Objek dataTransfer tidak hanya bisa membawa teks sederhana. Anda bisa menyimpan berbagai jenis data dan bahkan mentransfer file!

💡 Data Lanjutan dengan `dataTransfer`

Anda bisa menggunakan tipe MIME lain untuk data yang lebih kompleks:

// Di event dragstart:
e.dataTransfer.setData('text/html', '<strong>Ini adalah HTML</strong>');
e.dataTransfer.setData('application/json', JSON.stringify({ id: item.id, type: 'task' }));

// Di event drop:
const htmlData = e.dataTransfer.getData('text/html');
const jsonData = JSON.parse(e.dataTransfer.getData('application/json'));

Dengan application/json, Anda bisa mentransfer objek JavaScript yang kompleks setelah di-stringifikasi.

🎯 Transfer File dari Desktop ke Browser

Ini adalah use case yang sangat umum dan powerful. Drag and Drop API memungkinkan Anda menerima file yang diseret dari sistem operasi langsung ke browser Anda.

// Di event drop pada elemen target:
container.addEventListener('drop', (e) => {
    e.preventDefault();
    container.classList.remove('drag-over');

    const files = e.dataTransfer.files; // Mendapatkan objek FileList
    if (files.length > 0) {
        for (let i = 0; i < files.length; i++) {
            const file = files[i];
            console.log(`File: ${file.name}, Tipe: ${file.type}, Ukuran: ${file.size} bytes`);
            // Lakukan sesuatu dengan file, misalnya:
            // - Tampilkan preview gambar
            // - Upload ke server menggunakan Fetch API
            const p = document.createElement('p');
            p.textContent = `Dropped file: ${file.name}`;
            container.appendChild(p);
        }
    } else {
        // Handle data non-file seperti contoh sebelumnya
        const data = e.dataTransfer.getData('text/plain');
        if (data) {
            const droppedItem = document.getElementById(data);
            if (droppedItem && container !== droppedItem.parentNode) {
                container.appendChild(droppedItem);
            }
        }
    }
});

Dengan e.dataTransfer.files, Anda mendapatkan FileList dari file yang diseret. Anda kemudian bisa mengiterasinya dan memproses setiap file, misalnya untuk upload ke server atau menampilkan preview di sisi klien.

5. Feedback Visual dan Pengalaman Pengguna (UX)

Memberikan feedback visual yang jelas sangat penting untuk pengalaman pengguna yang baik. Pengguna perlu tahu:

Apakah sebuah elemen bisa diseret?
Apa yang sedang diseret?
Di mana elemen bisa dijatuhkan?
Apakah drop berhasil?

cursor: grab; dan cursor: grabbing;: Seperti yang kita lakukan di contoh, mengubah kursor saat hover dan saat menyeret memberikan indikasi yang jelas.
Opasitas atau Class CSS: Mengubah tampilan elemen yang diseret (misalnya, opasitas menjadi 0.5) membantu pengguna membedakan item asli dari item yang sedang diseret.
Highlight Drop Zone: Menambahkan class seperti drag-over ke elemen target memberikan petunjuk visual di mana item bisa dijatuhkan.
dataTransfer.setDragImage(): Anda bisa mengkustomisasi gambar yang muncul saat drag. Secara default, browser membuat “ghost image” dari elemen yang diseret. Tapi Anda bisa menggantinya:
```
// Di event dragstart:
const img = new Image();
img.src = 'path/to/custom-drag-icon.png';
e.dataTransfer.setDragImage(img, 10, 10); // Gambar, dan offset x,y dari kursor
```
Ini sangat berguna jika Anda ingin menyeret representasi visual yang berbeda dari elemen aslinya.

Aksesibilitas adalah aspek krusial yang sering terlupakan dalam implementasi Drag and Drop. Pengguna keyboard atau assistive technologies mungkin tidak bisa menggunakan mouse untuk menyeret.

Keyboard Interaction:
- Sediakan alternatif berbasis keyboard untuk fungsionalitas drag and drop. Misalnya, gunakan tombol panah atau tombol khusus (misal: Ctrl + Up/Down atau Space untuk memilih, lalu Enter untuk memindahkan ke lokasi yang dipilih).
- Ini biasanya membutuhkan logika JavaScript tambahan untuk mengelola fokus dan perpindahan item.
ARIA Attributes:
- Gunakan atribut ARIA untuk memberikan informasi kontekstual kepada assistive technologies.
- aria-grabbed="true/false": Menunjukkan apakah sebuah item sedang diseret atau bisa diseret.
- aria-dropeffect="copy/move/link/execute/none": Menunjukkan efek drop yang akan terjadi jika item dijatuhkan. Set ini pada elemen target.
- aria-labelledby atau aria-describedby: Berikan label yang jelas untuk elemen yang bisa diseret atau area drop.
```

<div class="item" id="item1" draggable="true" tabindex="0"
     role="listitem" aria-grabbed="false" aria-labelledby="item1_label">
    <span id="item1_label">Item A</span>
</div>


<div id="container1" class="container" role="region" aria-label="Daftar 1"
     aria-dropeffect="move">
    <h3>Daftar 1</h3>
    
</div>
```
✅ Best Practice: Selalu pikirkan bagaimana pengguna yang tidak bisa menggunakan mouse akan berinteraksi dengan fitur drag and drop Anda. Native Drag and Drop API memberikan fondasi, tapi interaksi keyboard seringkali harus diimplementasikan secara manual.

Kesimpulan

Menguasai Drag and Drop API native adalah keahlian berharga bagi setiap developer web. Ini memungkinkan Anda membangun antarmuka yang sangat interaktif dan intuitif tanpa harus bergantung pada library pihak ketiga, menghasilkan kode yang lebih ringan dan performant. Kita telah belajar mulai dari konsep dasar event dragstart hingga drop, cara mentransfer data dan file, pentingnya feedback visual untuk UX yang baik, dan yang tak kalah penting, bagaimana memastikan fitur drag and drop kita aksesibel untuk semua pengguna.

Dengan pemahaman ini, Anda siap untuk menciptakan pengalaman pengguna yang lebih kaya dan dinamis di aplikasi web Anda. Ingatlah untuk selalu memprioritaskan performa dan aksesibilitas dalam setiap implementasi!