Drag & Drop Pada Website Dengan JQUERY UI

Drag & Drop Pada Website Dengan JQUERY UI

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 .jquery_UI_logo  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 :html_blank            - Tambahkan Codescriptuntuk menambah code library Jquery & Jquery UI pada tag :insert_scriptlib         2.  Pada file HTML , siapkan suatu tag atau element yang akan diberi fitur dapat di drag dan untuk drop.            Pada Tag isi dengan code :html_2_desc2    dimana :  element_desc                            Pada Tag dibawah tambahkan code :css             3. Beri Code JqueryPada Tag dibawah :scriptTambahkan Code :drag_drop_jquery                dimanasakura_dragsakura_icon        agar tag dapat kita drag  sakura2_dragsakura-flower-clip-art-6          agar tag dapat kita drag sedangkanjquery_drag_drop_exp                          Selamat mencoba :-)  

IKUTI TRIAL KURSUS ONLINE. DAPATKAN KUPON DISKON 50%

IKUTI TRIAL KURSUS ONLINE. DAPATKAN KUPON DISKON 50%

NAMA PESERTA TEST & PENERIMA BEASISWA

  
  
Loading...



12 July 2014 ADMIN 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! Next Post Instant Awesome Drop Down Menu!