Cara Membuat Draggable Dengan jQuery UI

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.

25 September 2015

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Mini Bootcamp Backend Laravel 11 Bulan Mei 2024 di DUMET School
Webinar Selanjutnya Mei 2024

Minggu, 26 Mei 2024, 09.00-13.00 WIB

(4 Jam Membuat Backend di Laravel 11)

chat