Membuat Interaksi Droppable Dengan JQuery UI

JQuery Part 13 : Membuat Interaksi Droppable Dengan JQuery UI


Membuat Interaksi Droppable Dengan JQuery UI – masih di www.malasngoding.com pada kategori tutorial belajar JQuery UI Dasar. kali ini di tutorial jquery ui part 13 ini kita akan belajar membuat atau menggunakan sebuah fitur interactions dari jquery ui. yaitu interaksi droppable. sebelumnya pada part 12 kita telah belajar membuat interaksi Draggable dengan jquery ui. dan sekarang akan kita bahas tentang membuat interaksi droppable dengan jquery ui. interaksi droppable ini merupakan interaksi lanjutan dari interaksi draggable yang telah kita bahas pada tutorial sebelumnya.

Membuat Interaksi Droppable Dengan JQuery UI

Interactions droppable merupakan sebuah aksi di mana memungkinkan kita membuat drop atau melepaskan/memindahkan element pada element lain. jika interaksi draggable kan fungsi nya untuk membuat agar sebuah element bisa di seret. nah droppable ini berguna untuk membuat aksi ketika melepaskan. saya juga agak kesulitan untuk menjelaskannya. lebih baik langsung saja kita masuk ke contoh cara menggunakan interactions droppable jquery ui.

droppable.html

style.css

membuat interaksi droppable dengan jquery ui

membuat interaksi droppable dengan jquery ui

 

saya jelaskan sedikit. di sini untuk contohnya kita buat dua buah kotak. kotak yang pertama kita beri id apa aja terserah. tapi di sini saya beri id seret. kotak seret ini kita jadikan sebagai element yang bisa di drag untuk di drop ke kotak lainnya. dan kotak yang satu lagi kita beri id dengan drop. kotak kedua ini kita jadikan sebagai tempat untuk drop element.

dan kemudian kita kasih fungsi drag dan drop jquery ui nya

See the Pen membuat interaksi droppable dengan jquery ui by Malas Ngoding (@malasngoding) on CodePen.0

Incoming search terms:

  • cara drag drop jquery ui example
  • cara membuat interaksi sebuah ui
  • membuat dropabble jquery
  • Membuat Interaksi Dropable




About the author
Diki Alfarabi Hadi

Coding enthusiast. Someone who love learn something new. especially about web programming and web design. happy to share about knowledge and learn from other.


Discussion
  • No Comment

Write a Comment

Your email address will not be published. Required fields are marked *


CENTANG untuk bisa mengirimkan komentar. [ Verifikasi bukan robot ]