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 :