Draggable Image With jQuery | Memindahkan Gambar Dengan jQuery

Bismillah... Draggable Image With jQuery | Memindahkan Gambar Dengan jQuery. Judul ini yang akan saya jelaskan pada postingan kali ini, mengingat ketertarikan saya dengan indahnya effect-effect yang diberikan jQuery.

Sebelum ke pembahasan saya akan memberikan contoh drag image/gambar yang saya maksudkan supaya kalian tidak pusing/bingung menanggapi judul yang saya berikan. Silahkan drag/geser gambar dibawah ini (tekan mouse sambil pindahkan), ke tempat dimana saja kalian mau ( area blog ini )

Selain itu, kalian juga bisa melihat dan mencobanya pada Logo Blog ini (TULISAN DO THE BEST TO GET THE BEST ), silahkan kalian pindahkan sesuka hati kalian.

Untuk membuatnya, yang harus pertama dilakukan adalah kalian harus Login terlebih dahulu ke blogger kalian. Selanjutnya ikuti tahap-tahapnya dibawah ini :

1. Masuk Ke Rancangan
2. Pilih EDIT HTML
3. Sekarang simpan CSS berikut diatas kode ]]></b:skin>

.drag_gambar img { cursor: move;}

4. selanjutnya simpan script berikut diatas kode </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js' type='text/javascript'/>
<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function() {
$(&quot;div.drag_gambar img&quot;).draggable();
});
</script>

Catatan :
Perhatikan kode script berwarna Hijau diatas, jikan pada template kalian sudah terdapat script tersebut, jangan dipasang lagi, pasang saja script yang berwarna kuning nya.

5. Simpan Template

Untuk penggunaannya pada gambar, kalian bisa menggunakan kode berikut :

<div class='drag_gambar'><img alt='KETERANGAN GAMBAR' src='URL GAMBAR'/></div>

Tambahan :
Sebenarnya Cara ini tidak hanya digunakan untuk gambar, bisa pada teks, link dan bahkan widget blog pun bisa di pindahkan. Tapi nanti saya pelajari dulu.. hehehe.

semoga bermanfaat..

Silahkan kirimkan Donasi anda seikhlasnya berupa uang/pulsa (Klik Gambar kado disamping) untuk perkembangan blog ini dan Proses pembelajaran untuk sahabat.

Penulis :  Azis Lamayuda | BLOG : Do The Best To Get The Best
Saya hanyalah seorang yang sedang belajar dan berbagi pelajaran dengan siapapun. Blog ini dibuat untuk memudahkan kalian yang sedang belajar sama seperti saya.