Berikut adalah contoh kode untuk membuat sortable dengan menggunakan jQuery
See the Pen Membuat Sortable dengan jQuery by WebbizID (@De-Orchids) on CodePen.
<!DOCTYPE html>
<html>
<head>
<title>Membuat Sortable dengan jQuery</title>
<style>
/* CSS untuk mempercantik tampilan UI */
.sortable-list {
list-style-type: none;
margin: 0;
padding: 0;
}
.sortable-list li {
background-color: #f2f2f2;
border: 1px solid #ccc;
padding: 10px;
margin-bottom: 5px;
cursor: move;
}
</style>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$(document).ready(function() {
// Menginisialisasi sortable
$('.sortable-list').sortable();
// Mengatur opsi sortable
$('.sortable-list').sortable({
placeholder: 'sortable-placeholder',
axis: 'y',
opacity: 0.6,
cursor: 'move',
update: function(event, ui) {
// Aksi yang dilakukan setelah sorting selesai
console.log('Sorting selesai');
}
});
});
</script>
</head>
<body>
<h1>Membuat Sortable dengan jQuery</h1>
<ul class="sortable-list">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>
</body>
</html>Pada contoh kode di atas, kita menggunakan jQuery untuk membuat sortable. Kita menginisialisasi sortable dengan memanggil fungsi sortable() pada elemen dengan kelas .sortable-list. Kemudian, kita juga mengatur beberapa opsi sortable seperti placeholder, axis, opacity, cursor, dan update.
Ketika sorting selesai, fungsi update akan dipanggil dan kita dapat melakukan aksi yang diinginkan, seperti memperbarui data atau menampilkan pesan.
Dengan menggunakan kode di atas, kita dapat membuat daftar yang dapat diurutkan dengan mudah menggunakan drag and drop.
Tutorial lainnya:
Semoga contoh kode di atas bermanfaat untuk Anda dalam membuat sortable dengan jQuery.