Apakah Anda ingin membuat website yang lebih interaktif dan mudah digunakan? Drag & drop adalah salah satu fitur yang bisa meningkatkan pengalaman pengguna (UX) secara signifikan. Dalam artikel ini, kita akan membahas SortableJS, sebuah library JavaScript yang ringan namun powerful untuk membuat elemen di halaman web dapat di-drag dan di-drop.
Selain memahami cara penggunaannya, Anda juga akan mendapatkan tips dan trik SEO-friendly serta informasi baru yang mungkin belum banyak diketahui, agar pengalaman belajar Anda lebih lengkap dan menyenangkan.
1. Apa Itu SortableJS?
SortableJS adalah library JavaScript open-source yang memungkinkan Anda membuat daftar atau tabel menjadi sortable (bisa diurutkan ulang) menggunakan drag & drop.
Keunggulan SortableJS:
- Ringan dan cepat
- Mendukung touch devices (mobile & tablet)
- Mudah diintegrasikan dengan berbagai framework seperti React, Vue, dan Laravel
- Bisa men-trigger event ketika item dipindahkan, sehingga data bisa disimpan ke database
2. Cara Install SortableJS
Terdapat beberapa cara untuk menggunakannya:
a. Melalui CDN
Tambahkan kode berikut di <head> atau sebelum </body>:
<script src="https://cdn.jsdelivr.net/npm/sortablejs@1.15.0/Sortable.min.js"></script>
b. Menggunakan NPM
Jika menggunakan project berbasis Node.js:
npm install sortablejs --save
Kemudian import di file JS:
import Sortable from 'sortablejs';
3. Membuat Drag & Drop Dasar
Misalnya kita punya daftar materi di website:
<ul id="materi-list">
<li data-id="1">Materi 1</li>
<li data-id="2">Materi 2</li>
<li data-id="3">Materi 3</li>
</ul>
Aktifkan SortableJS:
new Sortable(document.getElementById('materi-list'), {
animation: 150,
onEnd: function (evt) {
console.log('Item dipindahkan dari', evt.oldIndex, 'ke', evt.newIndex);
}
});
Hasilnya: pengguna bisa drag & drop item, dan event onEnd akan menangkap posisi baru.
4. Drag & Drop untuk Tabel
SortableJS juga bisa diterapkan ke tabel. Contoh:
<tbody id="materi-table">
<tr data-id="1"><td>Materi A</td></tr>
<tr data-id="2"><td>Materi B</td></tr>
</tbody>
new Sortable(document.getElementById('materi-table'), {
animation: 150,
onEnd: function () {
const order = [];
document.querySelectorAll('#materi-table tr').forEach((row, i) => {
order.push({ id: row.dataset.id, urutan: i + 1 });
});
console.log(order);
// Kirim ke backend
}
});
Tips: gunakan data-id supaya urutan bisa dikirim ke server dan diupdate di database.
5. Tips SEO dan UX
- Gunakan teks yang jelas pada elemen draggable → memudahkan pembaca dan screen reader.
- Berikan animasi untuk feedback visual → lebih menarik dan interaktif.
- Optimalkan kecepatan loading → SortableJS ringan, tapi jangan menambahkan terlalu banyak script tambahan.
- Gunakan struktur HTML semantik →
<ul>,<table>,<tbody>agar bot search engine mudah mengindeks. - Jelaskan fungsi drag & drop di konten → membuat artikel lebih relevan dan keyword-rich.
6. Kelebihan dan Kekurangan SortableJS
| Kelebihan | Kekurangan |
| | |
| Ringan dan cepat | Perlu JavaScript aktif |
| Bisa digunakan di mobile | Event kompleks butuh custom |
| Mudah diintegrasikan framework | Tidak mendukung legacy IE |
7. Kesimpulan
SortableJS adalah solusi praktis, cepat, dan powerful untuk menambahkan fitur drag & drop di website. Dengan library ini, Anda bisa membuat daftar, tabel, atau grid menjadi lebih interaktif dan memudahkan pengguna mengatur konten sesuai kebutuhan mereka.
💡 Info tambahan: Dengan integrasi ke backend, perubahan urutan dapat disimpan ke database, membuat sistem seperti kursus online atau dashboard admin menjadi lebih profesional.
Kalau mau, saya bisa sekalian bikin versi artikel yang sudah termasuk kode drag & drop tabel materi lengkap dengan backend PHP/Laravel, supaya pembaca langsung bisa praktik.
Apakah mau saya buatkan versi itu juga?
