Cara Membuat Draggable Dengan jQuery UI

25/09/2015    Ekky Ridyanto    1414     Website

Hai semuanya pasti temen temen tentu pernah melihat suatu website dimana satu atau lebih elementnya atau gambarnya dapat dipindah-pindahkan dengan metode drag. Apa itu drag? menarik suatu objek atau element ? Kurang lebih artinya seperti itu. Dengan adanya "fungsi draggable" kita dapat memindahkan sebuah objek di halaman website hanya dengan menekan mouse, tahan dan gerakkan mouse tersebut. Kita akan mencoba menggunakannya dengan JQueryUI untuk membuat simple Draggable pada suatu element dimana semuanya dilakukan dengan mudah and user friendly.

Pada kode diatas saya telah menampilkan gambar dan di ikuti attribute id="drag" dimana id tersebut sebagai selector yang akan kita berikan fungsi sebagai berikut

Berikut adalah contoh implementasi dari konsep draggable dari kode diatas.

Sejauh ini Kita sudah berhasil membuat gambar tersebut bisa di drag atau dipindahkan ke segala arah dan pastikan file jQuery dan jQueryUInya kita includekan pada file HTMLnya sebagai berikut

Tentu saja dengan bantuan framework jQuery UI atau lainnya akan jauh lebih mudah untuk membuat sebuah element dapat di-drag dan temen temen juga bisa menambahkan option option dalam penggunaan fungsi tersebut seperti

Kode diatas disimpan dan dijalankan pada browser Firefox, Safari, dan chrome. Semoga bermanfaat.

No data.

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More