Membuat Objek Draggable dengan JqueryUI

Pada era sekarang banyak website baru dengan tampilan dan menu yang menarik. Seperti memberikan efek menakjubkan atau bahkan ada interaksi antara website dengan pengunjungnya sehingga ada aksi yang bisa kita lakukan untuk mencapai sesuatu. Misalnya terdapat sebuah mini game meletakan puzzle diwebsite salah satu contohnya. Dengan teknologi baru sekarang ini bukan hal yang mustahil kalian bisa membuat website interaktif yang akan membuat pengunjung akan betah berlama-lama berselancar di website kita.

Salah satu contoh yang sudah dibahas tadi bisa kita buat sendiri tentunya dengan bantuan javascript atau sejenisnya. Pada artikel kali ini kita akan mencoba membuat objek draggable dengan JqueryUI. Bagi teman-teman yang belum tahu apa itu JqueryUI itu adalah plugin Jquery yang memfokuskan untuk membuat suatu interaktif pada tampilan website kalian. Salah satunya adalah objek draggable. Dengan menggunakan plugin JqueryUI kalian akan dapat membuat suatu objek yang dapat dipindah-pindahkan dengan mouse kalian. Menarik bukan ?

Agar tidak penasaran mari kita coba buat. Kalian bisa ikuti contoh code dibawah ini.

drag.html

<html>
<head>
	<meta charset="UTF-8">
	<title>Draggable</title>
	 <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">    
	<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>
	<style>
		#draggable{width: 150px; height: 150px; padding: 0.5em;background:gold;}
	</style>
</head>
<body>
	<div id="draggable" class="ui-widget-content">
	  <p>Drag me around</p>
	</div>
</body>
</html>

<html>

<head>

<title>Draggable</title>

rel = "stylesheet">

$( function() {

$( "#draggable" ).draggable();

} );

</script>

<style>

#draggable{width: 150px; height: 150px; padding: 0.5em;background:gold;}

</style>

</head>

<body>

<p>Drag me around</p>

</div>

</body>

</html>

Setelah sudah kalian simpan filenya dengan format html. Kemudian untuk melihat hasilnya kalian bisa buka pada browser kalian.

Jika berhasil maka tampilanya akan seperti ini.

Kalian bisa coba untuk menggerakan box kuning tersebut dengan mouse kalian sesuka hati.

Hal itu bisa terjadi karena memang sudah diatur oleh JqueryUI. Yang perlu kalian perhatikan adalah cara aturan penulisan dari plugin jqueryUi. Kalian bisa membuat berbagai macam interaksi jika kalian mengikuti dokumentasi yang sudah diberikan. Salah satu contohnya adalah draggable ini.

<script>
	    $( function() {
		    $( "#draggable" ).draggable();
		  } );
	</script>

$( function() {

$( "#draggable" ).draggable();

} );

</script>

Script diatas adalah cara yang membuat box itu dapat dipindah-pindahkan. Cukup tentukan objek apa yang akan diberikan fungsi draggable, dimana pada contoh kali ini adalah si box kuning dengan id #draggable.

<div id="draggable" class="ui-widget-content">
	  <p>Drag me around</p>
	</div>

<p>Drag me around</p>

</div>

Mudah bukan ?

Sekian pembahasan mengenai cara membuat objek draggable dengan JqueryUI. Semoga bermanfaat.

drag.html

Facebook DUMET School

Categories