4

Drag and Drop dengan JQuery UI

Sabtu, 26 Desember 2009. Kategori : Tutorial || Download Versi PDF

Kali ini gw mau memberikan contoh bagaimana memakai JQuery UI draggable dan droppable dalam sebuah kasus, saat ini kasusnya adalah bagaimana caranya menunjukkan kepada adik-adik kecil habitat seekor binatang.

Ayo adik-adik, kita mulai yaa.. Duduk yang rapi, pandangan kedepan, dan perhatikan!

Ada 10 spesies dari kelas mamalia yang akan kita cocokkan berdasarkan habitatnya :

  1. Kambing
  2. Paus
  3. Sapi
  4. Penyu
  5. Homo Sapiens
  6. Gajah
  7. Lumba - lumba
  8. Kucing
  9. Singa Laut
  10. Harimau

Habitat dari spesies diatas dibagi menjadi dua bagian besar :

  1. Darat
  2. Laut

Nah JQuery UI akan membantu adik-adik sekalian dimanakah habitat yang benar untuk spesies-spesies tersebut. Bagaimana caranya?
Pertama-tama kakak buat list dari spesies-spesies tersebut dan bagi berdasarkan habitat melalui tag class :
<ul> <li class="darat">Kambing</li> <li class="laut">Paus</li> <li class="darat">Sapi</li> <li class="laut">Penyu</li> <li class="darat laut">Homo Sapiens</li> <li class="darat">Gajah</li> <li class="laut">Lumba - lumba</li> <li class="darat">Kucing</li> <li class="laut">Singa Laut</li> <li class="darat">Harimau</li> </ul>

Lalu kakak buat dua div sebagai tempat untuk menaruh list diatas, tidak lupa berikan id sebagai pembeda habitatnya :
<div id="darat">Darat</div> <div id="laut">Laut</div>

Setelah itu kakak lanjutkan dengan JQuery UI.
Pertama-tama buat div sebagai tempat untuk menaruh list diatas, tidak lupa berikan id sebagai pembeda habitatnya :
<div id="darat">Darat</div> <div id="laut">Laut</div>
Maksud dari revert: true pada skrip diatas adalah list yang didrag akan kembali ketempatnya semula apabila tidak jadi didrop atau adik-adik hanya menggesernya sembarangan.

Lalu kita buat kedua div menerima list yang didrop sesuai habitatnya :
$('#darat').draggable().droppable({ accept: '.darat', activeClass: 'ui-state-active', drop: function(event, ui) { ui.draggable.fadeOut(function(){ ui.draggable.appendTo('#darat').fadeIn('slow'); }); } }); $('#laut').draggable().droppable({ accept: '.laut', activeClass: 'ui-state-active', drop: function(event, ui) { ui.draggable.fadeOut(function(){ ui.draggable.appendTo('#laut').fadeIn('slow'); }); } });
Kakak jelaskan sedikit yah apa maksudnya, accept dimaksudkan agar hanya menerima class yang sudah ditentukan, activeClass memberikan reaksi apabila class yang ditentukan oleh accept dilakukan aksi drag, sedangkan drop adalah reaksi yang terjadi apabila aksi drop dilakukan yaitu :

  1. Hilangkan spesies dari list
  2. Masukkan spesies tersebut kedalam div habitat
  3. Munculkan spesies didalam habitat

Catatan : ui.draggable adalah objek yang didrop.

Mudah kaaan? Kalau mau coba dirumah, download saja file dibawah. Tidak perlu dilocalhost, filenya html murni kok
demo_jqueryui_1.zip

HEH! kamu yang kacamata! dikasih tau malah baca komik, sini kedepan, push up 20x!

4 Komentar

  • GravatarthondiKamis, 25 Pebruari 2010

    ampuuun bang, jgn disuruh push up ekekkeekbtw thanks banget ya elmunya, keren banget drag and dropnya. oya sukses semua untuk drag and drop tapi ketika di refresh hilang lagi bang. ada contoh yang lebih komplit gak hehehe kl via email ya bangthanks Grin

  • GravatarjenggoSabtu, 27 Pebruari 2010

    karena data yang berubah tidak disimpan, bisa menggunakan berbagai cara dari yang paling gampang yaitu menyimpannya kedalam file teks hingga yang paling repot yaitu menggunakan database (mysql contohnya)

  • GravatarmahendraKamis, 4 Maret 2010

    mas...klo nyimpen di database mysql ada tutorialnya gak?misalnya nich habitat hewan di atas dimasukkan ke web...trus ada anak2 yang pengen nanya "kalo monyet hidupnya dimana? nah trus masnya bilang di darat n menambahkan karakter monyet di habitat tadi...gimana caranya mas?balas ke email saya ya mas...makasi sebelumnya...deem_014@yahoo.com

  • GravatarjenggoJumat, 5 Maret 2010

    hmm.. ok, nanti tak buat versi yang menggunakan database.. sekarang lagi mencari gambar-gambar binatang..

Tulis Komentar