#JQuery UI

JQuery Part 13 : Membuat Interaksi Droppable Dengan JQuery UI

By Diki Alfarabi Hadi
11 February 2016
JQuery UI

Membuat Interaksi Droppable Dengan JQuery UI – masih di www.malasngoding.com pada kategori tutorial belajar JQuery UI Dasar. kali ini di tutorial jquery ui part 13 ini kita akan belajar membuat atau menggunakan sebuah fitur interactions dari jquery ui. yaitu interaksi droppable. sebelumnya pada part 12 kita telah belajar membuat interaksi Draggable dengan jquery ui. dan sekarang akan kita bahas tentang membuat interaksi droppable dengan jquery ui. interaksi droppable ini merupakan interaksi lanjutan dari interaksi draggable yang telah kita bahas pada tutorial sebelumnya.

Membuat Interaksi Droppable Dengan JQuery UI

Interactions droppable merupakan sebuah aksi di mana memungkinkan kita membuat drop atau melepaskan/memindahkan element pada element lain. jika interaksi draggable kan fungsi nya untuk membuat agar sebuah element bisa di seret. nah droppable ini berguna untuk membuat aksi ketika melepaskan. saya juga agak kesulitan untuk menjelaskannya. lebih baik langsung saja kita masuk ke contoh cara menggunakan interactions droppable jquery ui.

droppable.html

<!DOCTYPE html>

<html>

<head>

<title>JQuery Part 13 : Membuat Interaksi Droppable Dengan JQuery UI</title>

</head>

<body>

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

<p>Seret saya om !!</p>

</div>

<p>Lepaskan di sini</p>

</div>

</body>

$(document).ready(function(){

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

$( "#drop" ).droppable({

drop: function( event, ui ) {

$( this )

.addClass( "ui-state-highlight" )

.find( "p" )

.html( "Dropped!" );

}

});

</script>

</html>

style.css

body{

font-family: sans-serif;

}

h1{

text-align: center;

}

#seret {

width: 200px;

height: 200px;

padding: 20px;

float: left;

margin: 10px 10px 10px 0;

}

#drop {

width: 250px;

height: 250px;

padding: 20px;

float: left;

margin: 10px;

}

membuat interaksi droppable dengan jquery ui

saya jelaskan sedikit. di sini untuk contohnya kita buat dua buah kotak. kotak yang pertama kita beri id apa aja terserah. tapi di sini saya beri id seret. kotak seret ini kita jadikan sebagai element yang bisa di drag untuk di drop ke kotak lainnya. dan kotak yang satu lagi kita beri id dengan drop. kotak kedua ini kita jadikan sebagai tempat untuk drop element.

<p>Seret saya om !!</p>

</div>

<p>Lepaskan di sini</p>

</div>

dan kemudian kita kasih fungsi drag dan drop jquery ui nya

$(document).ready(function(){

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

$( "#drop" ).droppable({

drop: function( event, ui ) {

$( this )

.addClass( "ui-state-highlight" )

.find( "p" )

.html( "Dropped!" );

}

});

</script>

See the Pen membuat interaksi droppable dengan jquery ui by Malas Ngoding (@malasngoding) on CodePen.0

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.