![Drag & Drop Pada Website Dengan JQUERY UI](https://payroll.babastudio.com/uploads/blog/42.png)
Drag & Drop Pada Website Dengan JQUERY UI
By ADMIN 12 July 2014
Drag & Drop hal biasa kita lakukan dalam dunia digital yang kita rasakan sehari , pilih suatu item atau file lalu klik , seret (drag) dan langsung letakkan pada posisi yang kita mau (drop) , ya seperti drag & drop icon-icon pada desktop Windows atau pada game-game bahkan pada beberapa website sudah menerapkannya seperti upload photo yang hanya drag dari file photo ke website maka otomatis terupload , biasa nya diterapkan pada website-website socia network seperti Facebook.com
Hmmm bagaimana caranya ya kita implementasikan drag & drop pada website kita ? Jawabannya ya kita menggunakan JavaScript , tetapi kita menggunakan suatu plugin untuk JQUERY yaitu JQUERY UI .
Kita akan coba mengimplementasikannya , tetapi sebelumnya download disini untuk bahan untuk implementasinya , jika sudah download filenya , extract file tersebut , pada folder "demo_jquery_dragrop" coba double klik file index.html untuk lihat demonya .
Ada 3 Step untuk mengimplementasikan Drag & Drop dengan JQUERY UI .
1. Download Code Library :
- Jqueryhttp://www.jquery.com- Jquery UIhttp://jqueryui.com
Sisipkan code Library tersebut pada file HTML dari website kita
2. Pada file HTML , siapkan suatu tag atau element yang akan diberi fitur dapat di drag dan untuk drop.
3. Beri Code Jquery .
1. Download Code Library & sisipkan pada file HTMLDiasumsikan file library Jquery & Jquery UI sudah didownload , dimana pada file demo_jquery_dragrop yang kita download
sudah tersedia.
- Buat Folder untuk website kita .
- Copy semua folder pada file kita download seperti : * assetsberisi file-file images yang dibutuhkan * jsberisi file library Jquery & Jquery UI
- Buat file HTML , beri nama index.html , isi file tersebut dengan code :
- Tambahkan Code
untuk menambah code library Jquery & Jquery UI
pada tag :
2. Pada file HTML , siapkan suatu tag atau element yang akan diberi fitur dapat di drag dan untuk drop. Pada Tag isi dengan code :
dimana :
Pada Tag dibawah tambahkan code :
3. Beri Code JqueryPada Tag dibawah :
Tambahkan Code :
dimana![sakura_drag](http://www.babastudio.com/blog/wp-content/uploads/2014/07/sakura_drag.jpg)
agar tag
dapat kita drag
![sakura2_drag](http://www.babastudio.com/blog/wp-content/uploads/2014/07/sakura2_drag.jpg)
agar tag
dapat kita drag
sedangkan
Selamat mencoba :-)
![jquery_UI_logo](http://www.babastudio.com/blog/wp-content/uploads/2014/07/jquery_UI_logo-300x71.png)
![html_blank](http://www.babastudio.com/blog/wp-content/uploads/2014/07/html_blank-300x140.jpg)
![script](http://www.babastudio.com/blog/wp-content/uploads/2014/07/script-1024x37.jpg)
![insert_scriptlib](http://www.babastudio.com/blog/wp-content/uploads/2014/07/insert_scriptlib.jpg)
![html_2_desc2](http://www.babastudio.com/blog/wp-content/uploads/2014/07/html_2_desc2.jpg)
![element_desc](http://www.babastudio.com/blog/wp-content/uploads/2014/07/element_desc.jpg)
![css](http://www.babastudio.com/blog/wp-content/uploads/2014/07/css.jpg)
![script](http://www.babastudio.com/blog/wp-content/uploads/2014/07/script-1024x37.jpg)
![drag_drop_jquery](http://www.babastudio.com/blog/wp-content/uploads/2014/07/drag_drop_jquery.jpg)
![sakura_drag](http://www.babastudio.com/blog/wp-content/uploads/2014/07/sakura_drag.jpg)
![sakura_icon](http://www.babastudio.com/blog/wp-content/uploads/2014/07/sakura_icon.png)
![sakura2_drag](http://www.babastudio.com/blog/wp-content/uploads/2014/07/sakura2_drag.jpg)
![sakura-flower-clip-art-6](http://www.babastudio.com/blog/wp-content/uploads/2014/07/sakura-flower-clip-art-6.png)
![jquery_drag_drop_exp](http://www.babastudio.com/blog/wp-content/uploads/2014/07/jquery_drag_drop_exp.jpg)
IKUTI TRIAL KURSUS ONLINE
IKUTI TRIAL KURSUS ONLINE
NAMA PESERTA TEST & PENERIMA BEASISWA
12 July 2014 Bagikan di Twitter Bagikan di Facebook Bagikan di Google+ Bagikan di Google+
Artikel menarik lainnya
Previous Post Fitur Mengirimkan Laporan Perminggu Dari Twitter Buat Kamu! Instant Awesome Drop Down Menu!