Halo teman – teman selamat datang kembali di website tips dan trik Dumet School, pada kesempatan kali ini saya akan memberikan tips dan trik tentang Memanfaatkan Fungsi Draggable jQuery UI Membuat Layout yaitu kita akan memanfaatkan Draggable  untuk membuat sebuah layout. Apakah kalian menyukai bola,,??

Kali ini kita akan membuat sebuah layout line up formasi bola, biasanya ketika menonton bola ada host komentator kemudian di sediakan layar untuk merubah formasi – formasi prediksi. Nah kali ini kita akan membuat nya dengan menggunakan html, css dan jQuery UI. Supaya tidak penasaran teman – teman bisa lihat pada gambar di bawah ini

Memanfaatkan Fungsi Draggable jQuery UI Membuat Layout

Kemudian bisa di atur formasinya dengan menggeser setiap icon nya

Memanfaatkan Fungsi Draggable jQuery UI Membuat Layout

Dan menjadi formasi pada masing – masing klub, oke langsung saja kita implementasikan Memanfaatkan Fungsi Draggable jQuery UI Membuat Layout untuk membuat layout seperti gambar di atas ini. Teman – teman siapkan text editornya dan ketikkan script html nya seperti di bawah ini

Memanfaatkan Fungsi Draggable jQuery UI Membuat Layout

Kemudian masukkan konten class person

Memanfaatkan Fungsi Draggable jQuery UI Membuat Layout

Copy class person dan pastekan di dalam class line sebanyak 5 dan class line1 sebanyak 5 dan agar total 11, hampir lupa teman – teman siapkan gambar background lapangannya dan icon dari masing – masing club. Jika semua sudah kita berikan css nya

Jika sudah save dengan nama index.html dan jalankan pada browsernya, maka hasil sementara seperti gambar di bawah ini

Memanfaatkan Fungsi Draggable jQuery UI Membuat Layout

Langkah berikutnya kita gunakan jQuery UI nya untuk memberikan fungsi Draggable, pertama kita berikan terlebih dahulu library jQuery dan jQuery UI nya

Memanfaatkan Fungsi Draggable jQuery UI Membuat Layout

Letakkan didalam tag head, baru kita panggil class nya dan berikan Draggable nya

Memanfaatkan Fungsi Draggable jQuery UI Membuat Layout

Jika sudah save dan refresh pada browsernya, maka icon akan dapat di drag dan di bentuk formasi serangan setiap club nya. Inilah contoh sederhana dari salah satu fungsi jQuery UI, dan masih banyak sekali fungsi yang ada pada jQuery. Teman – teman juga bisa membuat sebuah ide dan di ekspresikan di dalam layout website seperti layout yang kita buat pada artikel kali ini.

Oke sekian pada artikel kali ini tentang Memanfaatkan Fungsi Draggable jQuery UI Membuat Layout kita berjumpa kembali pada tips dan trik yang akan datang. Semoga bermanfaat, terimakasih dan sampai jumpa.