JQuery UI Part 12 : Membuat Interaksi Draggable Dengan JQuery UI

Membuat Interaksi Draggable Dengan JQuery UI – hai, jumpa lagi di www.malasngoding.com masih di kategori tutorial JQuery UI. tepatnya sudah sampai pada tutorial jquery ui part 12. setelah pada part-part sebelumnya kita membahas tentang tutorial-tutorial membuat widget dengan jQuery ui. seperti membuat widget form inputan tanggal dengan jquery ui (datepicker), membuat widget accordion dengan jquery ui, dan masih banyak lagi widget-widget lainnnya yang telah kita pelajari pada tutorial jquery ui sebelumnya di www.malasngoding.com.
Pada tutorial jquery ui part 12 ini. kita akan belajar membuat interaksi draggable dengan menggunakan jquery ui. jadi di jquery ui ada yang namanya interactions. interactions jquery ui meliputi aksi-aksi interaksi yang bisa di lakukan dengan menggunakan jquery ui. karena jquery ui sudah menyediakan fitur ini menjadi function-function dalam bentuk javascript yang tinggal di gunakan dengan mudah.
Membuat Interaksi Draggable Dengan JQuery UI
Sebelum kita masuk ke cara membuat interaksi draggable dengan jquery ui akan saya jelaskan dulu pengertian draggable. jadi draggable ini merupakan interaksi yang di sediakan oleh jquery ui dalam bentuk fitur. nah dengan fitur ini memungkinkan kita membuat event drag atau dengan kata mudah nya kita bilang aja bisa nyeret element dom dengan cara klik pada element yang udah di kasih fungsi draggable. pendam kliknya dan langsung seret elementnya.
Cara menggunakan fitur interaction draggable jquery ui
mungkin ada teman-teman yang baru belajar jquery ui dan belum membaca panduan jquery ui sebelumnya di www.malasngoding.com di asumsikan untuk membaca tutorial jquery ui sebelumnya biar lebih mudah memahaminya. oke lanjut lagi cara membuat dan menggunakan fitur draggable jquery ui.
draggable.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<!DOCTYPE html> <html> <head> <title>JQuery UI Part 12 : Membuat Interaksi Draggable Dengan JQuery UI</title> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery-ui/jquery-ui.js"></script> <link rel="stylesheet" type="text/css" href="js/jquery-ui/jquery-ui.css"> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <h1>Membuat Interaksi Draggable Dengan JQuery UI | www.malasngoding.com</h1> <!-- element kotak yang akan di beri fungsi draggable jquery ui--> <div id="seret"> <p>INI KOTAK YANG AKAN DI SERET</p> </div> </body> <script type="text/javascript"> $(document).ready(function(){ $("#seret").draggable(); }); </script> </html> |
style.css
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
body{ font-family: sans-serif; } h1{ text-align: center; } #seret{ border:1px solid #cfcfcf; background: #87D1D8; width: 200px; height: 200px; padding: 20px; } #seret p{ color: #fff; font-size: 13pt; text-align: center; } |
bisa teman-teman perhatikan pada syntax di atas. pertama kita hubungkan dulu libary jquery dan jquery ui nya. bisa teman-teman lihat di sini penjelasan tentang cara menggunakan jquery ui.
1 2 3 |
<script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery-ui/jquery-ui.js"></script> <link rel="stylesheet" type="text/css" href="js/jquery-ui/jquery-ui.css"> |
dan kemudian kita buat sebuah kotak dengan menggunakan html dan css. di sini kita bisa menggunakan element apa saja. tetapi saya menggunakan element <div>. yang kemudian kita beri selector nya dengan id “seret”.
1 2 3 4 |
<!-- element kotak yang akan di beri fungsi draggable jquery ui--> <div id="seret"> <p>INI KOTAK YANG AKAN DI SERET</p> </div> |
dan terakhir tinggal kita berikan fungsi draggable() milik si jquery ui ini.
1 2 3 4 5 |
<script type="text/javascript"> $(document).ready(function(){ $("#seret").draggable(); }); </script> |
teman-teman bisa mengembangkan nya lagi dengan membaca langsung settingan lainnya untuk menggunakan fitur draggable jquery ui ini dengan membaca pada situs resminya di sini. sekarang jalankan dan coba seret element kotak dengan cara klik dan pendam. kemudian arahkan cursor ke arah yang lain.

membuat interaksi draggable dengan jquery ui
See the Pen interaksi draggable jquery ui by Malas Ngoding (@malasngoding) on CodePen.
oke sekian dulu JQuery UI Part 12 : Membuat Interaksi Draggable Dengan JQuery UI. selanjutnya akan kita lanjutkan ke tutorial jquery ui interaction dropable dengan jquery ui.
Tutorial Menarik Lainnya

JQuery UI Part 15 : Interaksi Selectable dan Sortable di JQuery UI


JQuery UI Part 14 : Membuat Resizable Dengan JQuery UI


JQuery Part 13 : Membuat Interaksi Droppable Dengan JQuery UI

