Permainan Drag dengan Jquery

Di dalam Jquery, terdapat sebuah fungsi bernama "drag", jika kita memakai efek tersebut, kita bisa melakukan drag terhadap semua elemen html yang kita mau. Keren kan? Sudah saatnya elemen-elemen di html website kita bisa kita gerakan. Selain tampilannya lebih keren, juga bisa membuat pengunjung betah berada di website kita.

Untuk membuat suatu elemen bisa digerakkan, ikuti langkah-langkah berikut.

1) Download UI Jquery di http://jqueryui.com/download

2) Jalankan Dreamweaver dan buat file html baru.

3) Masukkan CSS dan JS Jquery dengan cara mengetikkan skrip di bawah ini

<link type="text/css" href="css/black-tie/jquery-ui-1.8.21.custom.css" rel="stylesheet" />

<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>

<script type="text/javascript" src="js/jquery-ui-1.8.21.custom.min.js"></script>

Perhatikan tulisan black-tie pada baris skrip pertama, ganti dengan nama theme Jquery yang Anda pilih. Misalnya UI Lightness.

4) Pilih salah satu elemen, pada artikel ini saya memilih gambar pohon.

5) Klik gambar pohon tersebut, lalu berikan tulisan "kotak1" pada kotak name.




6) Tuliskan skrip Javascript berikut.

<script type="text/javascript">



$(document).ready(function(){



for(var a=1;a<21;a++){

$("#kotak"+a).draggable({disabled: false});

bisadrag=1;

}

});

</script>

7) Perhatikan tulisan a<21; pada skrip di atas. Itu menandakan bahwa Anda bisa memasang fungsi drag pada 20 elemen yang mempunyai id dari "kotak1" sampai "kotak20". Angka tersebut bisa dirubah sesuai kebutuhan Anda.


8) Jalankan file html tersebut di browser. Anda bisa menikmati fungsi Drag.



Download Source Code : http://www.mediafire.com/?78q0to9c6cox1k7

Untuk membahas artikel ini bersama saya dan pengunjung lain, silahkan isi kotak komentar yang berada di bawah artikel ini ^_^.