Declarative Dragging

Intro: Saat Drag-and-Drop Bikin Kamu Mau Lepas Handle

Hai, warga internet yang sesekali merasa diri sebagai wong edan di tengah sesi ngoding malam-malam. Kamu pasti pernah mengalami ini: pengen bikin elemen sederhana yang bisa di-seret, eh malah ketemu dengan antrean event listener yang panjang, hitungan koordinat secara manual, dan debugging z-index yang ngeledek hingga tiga pagi. Bukan cuma kamu. Di Hacker News, seseorang bercerita tentang pertemuan mingguan di tempat kerjanya pertama hanya untuk assign tiket dan estimasi—karena sistem drag-and-drop mereka ribet hingga butuh rapat berkala. Baca cerita asli di Hacker News.

Andrew Blinn, seorang peneliti antarmuka, tidak melulu membiarkan situasi itu berlanjut. Menurut unggahannya di X, drag-and-drop membuat halaman digital terasa dapat dicekrik (graspable), tapi membangunnya dengan baik cukup merepotkan sehingga banyak orang yang malas mencoba. Lihat unggahan Andrew Blinn. Itulah saatnya untuk Declarative Dragging, atau akrab disebut D2.

Dengan gaya wong edan yang jujur: kalian tidak sendirian kalau pernah capek ngatur mousedown, mousemove, dan mouseup satu per satu. D2 janjikan cara yang lebih berani, lebih deklaratif, dan tentu saja lebih menyenangkan untuk seret-lepas di web.

1. Apa Sebenarnya Declarative Dragging (D2)?

Declarative Dragging adalah pendekatan baru dalam desain interaksi di mana kamu mendeklarasikan apa yang ingin di-drag dan batasan perilakunya, bukannya menuliskan langkah demi langkah bagaimana piksel harus bergerak menurut gerakan mouse, sentuhan, atau stylus. Konsep ini resmi diperkenalkan melalui situs resmi declarative-dragging.github.io dan diuji secara akademis di UIST ’26, konferensi antarmuka pengguna terkemuka yang didukung oleh SIGCHI. Lihat detail konten di program UIST ’26.

Dalam bahasa sehari-hari, berarti kamu tidak lagi perlu menulis logika imperatif untuk setiap titik gerakan. Kamu cukup menyatakan niat, misalnya “elemen ini boleh di-drag dalam wadah X dengan snapping ke grid Y”, lalu engine atau browser yang mendukung D2 yang menangani sisa-nya. Ini serupa dengan paradigma deklaratif yang sudah kamu kenal dari React atau CSS, tapi dikhususkan untuk interaksi seret-lepas.

Pencapaian akademisnya pun tak main-main. D2 menerima Best Paper Award di UIST ’26, sebagaimana diungkapkan oleh akun resmi Computer Science and Engineering di University of Michigan. Lihat pengumuman UMich CSE. Dalam dunia HCI (Human-Computer Interaction, interaksi komputer-manusia), Best Paper Awards tidak sembarang; itu tandanya komunitas penelitian mengakui kontribusi nyata terhadap cara kita membangun antarmuka.

2. Paradigma Imperatif vs Deklaratif dalam Drag-and-Drop

Untuk mengerti mengapa D2 menarik, kita harus membandingkannya dengan pendekatan imperatif yang masih mendominasi banyak aplikasi web saat ini.

Pendekatan Imperatif (Lama dan Ribet)

Dalam model imperatif, developer bertanggung jawab sepenuhnya atas siklus hidup drag dari awal sampai akhir. Berikut alur umum yang harus diatur manual:

1. Deteksi mousedown atau pointerdown untuk memulai seretan.
2. Menghitung offset antara kursor dan titik asal elemen.
3. Men-bind mousemove atau pointermove di objek document untuk memperbarui posisi left/top atau transform translate3d secara real-time.
4. Menangani batasan (constraints), seperti tidak boleh melewati batas wadah atau bentrok dengan elemen lain.
5. Membersihkan event listener saat mouseup atau pointerup terjadi.

Berikut adalah contoh konseptual pendekatan imperatif (bukan sintaks resmi D2):

// Contoh konseptual: pendekatan imperatif (tidak spesifik D2)
const box = document.querySelector('.box');
let isDragging = false;
let offsetX, offsetY;
box.addEventListener('mousedown', (e) => {
isDragging = true;
offsetX = e.clientX - box.getBoundingClientRect().left;
offsetY = e.clientY - box.getBoundingClientRect().top;
});
document.addEventListener('mousemove', (e) => {
if (!isDragging) return;
box.style.left = `${e.clientX - offsetX}px`;
box.style.top = `${e.clientY - offsetY}px`;
});
document.addEventListener('mouseup', () => {
isDragging = false;
});

Kode di atas terlihat sederhana, tapi kalau kamu butuh fitur lanjutan seperti snapping, animasi kembali (revert), batasan area, atau aksesibilitas keyboard, jumlah baris kode akan melonjak seperti ngediayan cabang durian. Setiap elemen yang dapat di-drag butuh logika duplikat atau abstraksi manual yang rumit.

Pendekatan Deklaratif (D2)

Dalam model deklaratif seperti yang diusulkan oleh D2, kamu mendefinisikan niat interaksi, bukan alur eksekusi detailnya. Meskipun sintaks eksak harus dikonfirmasi langsung dari sumber resmi D2, intinya adalah memisahkan what dari how. Kamu mungkin hanya perlu menyatakan atribut atau elemen deklaratif yang menandai sesuatu sebagai “draggable”, bersama dengan aturannya.

// Contoh konseptual: pendekatan deklaratif (ilustrasi, bukan sintaks resmi D2)
<draggable constrain-to=".workspace" snap-to="grid">
<div class="card">Seret saya!</div>
</draggable>

Perlu ditekankan: contoh di atas adalah ilustrasi konseptual untuk membantu memahami perbedaan paradigma, bukan dokumentasi resmi D2. Untuk sintaks resmi dan implementasi terbaru, silakan merujuk langsung ke declarative-dragging.github.io.

3. Dragology: Deklaratif Dragging untuk SVG di Web

Salah satu implementasi konkret dari gagasan deklaratif dragging tersedia di repositori GitHub dragology, milik organisasi declarative-dragging/dragology. Repositori ini berfokus pada deklaratif dragging untuk elemen SVG di web.

Mengapa SVG penting? Karena banyak aplikasi grafik, diagram, dan editor vektor bergantung pada SVG untuk elemen yang dapat di-manipulasi. Dalam SVG, koordinat dan transformasi sering kali lebih kompleks daripada elemen HTML biasa. Ada sistem koordinat pengguna (user coordinate system), viewBox, dan matriks transformasi yang harus dipahami jika ingin menggerakkan lingkaran atau persegi panjang dengan halus. Dengan pendekatan deklaratif, developer SVG tidak perlu lagi menulis logika hitung-hitunan matriks secara manual untuk setiap elemen yang ingin di-drag.

Dari halaman GitHub, tujuan utama dragology adalah menyediakan cara yang lebih bersih dan terstruktur untuk menangani interaksi seret pada elemen vektor. Ini mencerminkan visi D2 yang lebih luas: mengurangi “lantai” (floor) untuk membangun interaksi seret-lepas yang terlihat rapi dan beragam. Baca paper Andrew Blinn tentang D2 untuk penjelasan lebih lanjut.

4. Temuan Penelitian: Wawancara dengan 13 Developer Antarmuka

D2 bukan sekadar ide atau prototipe; itu didukung oleh penelitian empiris. Dalam paper-nya, Andrew Blinn (bersama kolaboran yang disebutkan sebagai Josh) melakukan wawancara dengan 13 developer antarmuka. Temuan utama yang disebutkan dalam abstrak paper adalah bahwa deklaratif dragging lowers the floor for building polished, varied drag-and-drop interactions.

“Interviews with 13 interface developers suggest declarative dragging lowers the floor for building polished, varied drag-and-drop interactions.”

Artinya, dengan D2, ambang batas untuk mulai membuat fitur seret-lepas yang keren dan beragam menjadi lebih rendah. Developer tidak perlu lagi menjadi ahli dalam matematika koordinat atau event loop browser untuk menciptakan pengalaman seret yang mulus. Ini sangat relevan untuk tim frontend yang kecil atau individu yang ingin mencoba ide interaksi tanpa terjebak dalam kode boilerplate berantakan.

Dari sudut pandang wong edan, ini seperti beralih dari memasak nasi dengan api kayu yang harus diatur mati-nyala secara manual, ke rice cooker yang cukup ditekan tombol. Hasilnya tetap nasi matang, tapi stresnya jauh lebih rendah. Untuk junior developer, D2 bisa menjadi pintu masuk yang lebih ramah ke dalam dunia interaksi canggih.

5. Aksesibilitas dan Pengakuan dari SIGCHI/UIST ’26

UIST (User Interface Software and Technology) adalah salah satu konferensi terkemuka di bidang HCI dan didukung oleh SIGCHI, special interest group dari ACM yang fokus pada interaksi komputer-manusia. Konferensi UIST ’26 menjadi tempat D2 diperkenalkan dan kemudian mendapat Best Paper Award. Menurut unggahan resmi UMich CSE, penghargaan ini juga berkaitan dengan aspek aksesibilitas. Lihat detail di X UMich CSE.

Mengapa aksesibilitas penting di sini? Dalam pendekatan imperatif, memastikan elemen yang dapat di-drag juga dapat diakses melalui keyboard (misal menggunakan Tab dan Enter) seringkali menjadi pikiran kedua atau bahkan diabaikan. Model deklaratif memungkinkan engine D2 untuk menangani asumsi-asumsi aksesibilitas dasar secara default, seperti manajemen fokus, indikasi visual saat difokuskan, dan interaksi melalui navigasi non-mouse. Ini belum tentu berarti D2 sudah menyelesaikan semua masalah a11y, tapi ia memberikan fondasi yang lebih baik dibandingkan menulis semua dari nol setiap kali membuat fitur seret.

Untuk detail jadwal dan konten UIST ’26, kunjungi halaman resmi SIGCHI. Program UIST ’26.

6. Reaksi Komunitas: Observable, Lobsters, dan Hacker News

Seperti biasa, komunitas teknologi tidak diam diam saat konsep baru muncul. Di forum Observable, terdapat diskusi tentang “Draggable Plot” yang menyebutkan publikasi terbaru Declarative Dragging (D2) sebagai perkembangan penting dalam tujuan interaksi data. Lihat diskusi di Observable Forum. Ini menunjukkan bahwa D2 tidak hanya relevan untuk elemen UI umum, tapi juga untuk visualisasi data yang memerlukan interaksi seret pada grafik atau plot.

Di Lobsters, komunitas link aggregator untuk teknologi, domain declarative-dragging.github.io juga mendapat perhatian dengan kategori desain, grafis, dan plotting. Lihat di Lobsters. Sementara itu, di Hacker News, diskusi tentang D2 muncul bersama cerita pribadi tentang betapa ribetnya drag-and-drop di tempat kerja pertama seseorang. Diskusi HN.

Semua ini mengindikasikan bahwa D2 sedang menjadi topik hangat di kalangan desainer interaksi, developer frontend, dan peneliti HCI sekaligus. Komunitas tidak hanya membicarakan konsepnya, tapi juga mulai mencari cara untuk menerapkannya dalam proyek nyata.

7. Tantangan dan Batasan yang Perlu Diperhatikan

Walaupun D2 menjanjikan, tidak ada teknologi yang sempurna. Berikut beberapa tantangan yang harus dipertimbangkan sebelum mengadopsi deklaratif dragging secara luas:

• Kontrol tingkat rendah: Beberapa developer membutuhkan kontrol sepenuhnya atas setiap piksel selama gerakan seret. Model deklaratif mungkin terlalu abstraksi untuk use case yang sangat spesifik atau kustom ekstrim.
• Kurva pembelajaran: Berpikir secara deklaratif tentang interaksi berbeda dari menulis prosedur imperatif. Tim yang terbiasa dengan event listener manual perlu waktu untuk menyesuaikan pola pikir baru.
• Ekosistem dan dukungan browser: Karena D2 masih relatif baru, dukungan native di browser dan alat-alat pengembang (devtools) mungkin belum matang dibandingkan dengan API drag-and-drop HTML5 standar.
• Performansi pada skala besar: Seret-lepas ratusan elemen SVG sekaligus mungkin memerlukan optimisasi tambahan, tergantung implementasi engine D2 yang digunakan.

Oleh karena itu, disarankan untuk mencoba D2 pada proyek kecil atau komponen terisolasi sebelum memutuskan untuk memigrasikan seluruh sistem drag-and-drop yang sudah ada. Jangan langsung mengganti semua fitur seret di aplikasi produksi besar tanpa pengujian yang matang.

8. Kesimpulan Ahli: Wong Edan, Kode Rapi, Seret yang Nyaman

Sebagai seseorang yang sudah terlalu banyak kali tidur di atas keyboard karena debug drag-and-drop imperatif, saya berpendapat bahwa Declarative Dragging (D2) adalah langkah yang tepat ke depan. Dengan memindahkan kompleksitas koordinat dan event handling ke dalam deklarasi yang lebih berarti, D2 membantu developer fokus pada pengalaman pengguna, bukan pada perangkat lunak plumbing yang membosankan.

Bukti yang ada saat ini—dari situs resmi D2, paper UIST ’26, repositori dragology, hingga pengakuan Best Paper Award dari UMich CSE—menunjukkan bahwa ini bukan sekadar hype sementara, tapi penelitian yang serius dengan dampak nyata bagi komunitas frontend dan HCI.

Jadi, kalian wong edan ngoding di luar sana, jangan takut mencoba hal baru. Seret elemen itu bisa lebih deklaratif, lebih rapi, dan tentu saja lebih menyenangkan. Selamat mencoba, dan semoga drag-and-drop kalian tidak pernah lagi membuat rapat mingguan hanya untuk assign tiket estimasi!