Membuat Fungsi Draggable dengan JqueryUI

Banyak sekali plugin diluar sana yang bisa kalian pergunakan untuk membuat website kita menjadi lebih interaktif. Dengan plugin, kita bisa mengurangi waktu pengerjaan karena telah dibantu oleh plugin tersebut. Plugin dirancang agar kita bisa membuat website lebih cepat dan dinamis, sehingga kita tidak perlu repot membuatnya dari awal. Salah satu plugin yang akan kita bahas adalah dari jqueryUI. Kita akan mencoba membuat fungsi draggable dengan JqueryUI.

JqueryUI ini adalah jquery yang lebih dikhususkan untuk interaktif website yang lebih menarik lagi. Ada banyak fitur yang bisa kalian pergunakan, salah satunya yang akan kita buat adalah draggable. Draggable ini akan membuat suatu elemen pada html kalian menjadi bisa di drag. Cara membuatnya cukup mudah, kalian cukup mendownload atau menghubungkan file jqueryUI ke website kalian. Dan ada beberapa yang perlu kalian set agar fitur dari JqueryUI dapat berjalan dengan lancar. Untuk mempersingkat waktu kalian bisa salin contoh code berikut ini.

drag.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery UI Draggable - Default functionality</title>  
  <style>
    #draggable { width: 150px; height: 150px; background: red}
  </style>
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script>
  $( function() {
    $( "#draggable" ).draggable();
  } );
  </script>
</head>
<body>
 
<div id="draggable">
  <p>Drag me around</p>
</div>
 
 
</body>
</html>

Setelah sudah kalian simpan file tersebut dengan format html. Nama filenya bisa disesuaikan dengan keinginan kalian. Untuk melihat hasilnya kalian cukup buka file tersebut pada browser kalian. Jika berhasil maka tampilanya akan seperti ini.

membuat-fungmembuat-fungsi-draggable-dengan-jqueryui-rangga1-200817si-draggable-dengan-jqueryui-rangga1-200817

Gambar diatas adalah tampilan awal saat kita buka file tersebut pada browser kita.

membuat-fungsi-draggable-dengan-jqueryui-rangga2-200817

Gambar diatas adalah pada saat kotak tersebut telah kita pindahkan.

Cara kerja gambar kotak tersebut adalah kalian bisa gerakan dengan cara menekan mouse kalian pada kotak tersebut dan geser kemanapun yang kalian inginkan. Seperti itu hasil dari menggunakan fitur draggable dari JqueryUI.

Mudah bukan ?

Sekian pembahasan mengenai bagaimana cara membuat fungsi draggable dengan JqueryUI. Semoga bermanfaat dan dapat menginspirasi kalian semua. Sampai jumpa pada pembahasan artikel yang tidak kalah seru dan menarik lainya.

DUMET School Author

DUMET School adalah tempat kursus website, kursus desain grafis, kursus digital marketing, kursus video editing dan kursus mobile apps terbaik di Jakarta dan Depok.

Leave a Reply

Your email address will not be published. Required fields are marked *