#JQuery UI

JQuery UI Part 12 : Membuat Interaksi Draggable Dengan JQuery UI

By Diki Alfarabi Hadi
10 February 2016
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

<!DOCTYPE html>

<html>

<head>

<title>JQuery UI Part 12 : Membuat Interaksi Draggable Dengan JQuery UI</title>

</head>

<body>

<h1>Membuat Interaksi Draggable Dengan JQuery UI | www.malasngoding.com</h1>

<p>INI KOTAK YANG AKAN DI SERET</p>

</div>

</body>

$(document).ready(function(){

$("#seret").draggable();

});

</script>

</html>

style.css

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.

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”.

<p>INI KOTAK YANG AKAN DI SERET</p>

</div>

dan terakhir tinggal kita berikan fungsi draggable() milik si jquery ui ini.

$(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.

Diki Alfarabi Hadi

Coding enthusiast. Someone who love learn something new. especially about web programming and web design. happy to share about knowledge and learn from other.