Cara Mudah Memindahkan Object Tertentu (Draggable) With jQuery

Sesuai dengan judul diatas kali ini kita belajar mengenai beragam effect jQuery salah satunya ialah 'Memindahkan Object Tertentu (Draggable) With jQuery' atau yang lebih populer disebut 'Draggable Image With jQuery'. Maksud dari effect ini ialah kita dapat menggeser atau mendrag gambar (object tertentu), Object tertentu maksudnya, selain gambar diblog anda, bisa juga mendrag object lain, misal, Widget pada sidebar,footer.dll sesuai dengan keinginan kita sendiri.

Sedangkan Tutorial yang saya berikan ini, hanya akan mencoba menderag sebuah gambar diblog.
Untuk lebih jelasnya klik tombol live demo dibawah ini untuk melihat contohnya.


Baiklah Jika sobat tertarik mencobanya silahkan ikuti langkah berikut :

<script src='http://kangdadang.googlecode.com/files/jQuery.js' type='text/javascript'/>
<script src='http://kangdadang.googlecode.com/files/jQuery-Ui.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function() {
$(&quot;img&quot;).draggable();
});
</script>

4. Simpan Template.

- Perhatikan Script diatas yang berwarna hijau, jika sobat sudah memasangnya ditemplate sobat, maka script diatas tidak perlu lagi digunakan, (biar gak double), cukup gunakan script yang dibawahnya..
- Sedangkan Teks yang saya kasih warna merah, itu adalah kode object yang ingin sobat drag (dipindahkan).

Keterangan Lanjutan :
- Seperti yang saya jelaskan diatas akan memindahkan Object Tertentu, jadi selain gambar yang ada diblog kita, kita bisa juga mendrag object lain Seperti Widget Sidebar,Footer,!! ,untuk melakukan semua itu, cukup merubah kata kunci 'img' (berwarna merah) yang ada di bagian script diatas. Misal anda ingin mendrag object lain misal 'widget sidebar' cukup masukkan kode widget sidebar anda. contoh pada template saya kode sidebar saya '#sidebar-wrapper' sedangkan bagian widget footer template saya '#footer-wrapper' (setiap template berbeda-beda).

Semoga Tutorial diatas sudah jelas dan dapat dimengerti,jika masih ada yang belum paham dengan tutorial diatas,silahkan bertanya, dengan meninggalkan pesan dikotak komentar dibawah..

Please rate this article: