Membuat Game Edukasi Anak Menggunakan Fungsi Draggable Dan Dropped

Hallo teman-teman Dumet School, kembali lagi dengan saya Shelli Ripati. Pembahasan sebelumnya saya pernah membahas tentang fungsi draggable pada jquery ui dan pembahasan sekarang hampir sama dengan pembahasan sebelumnya namun ada sedikit tambahan fungsi yaitu Membuat Game Edukasi Anak Menggunakan Fungsi Draggable Dan Dropped.

Fungsi dropped berfungsi untuk meletakkan elemen lain di atas elemen tersebut. Dan disini saya menggunakan fungsi accept dimana berfungsi untuk mengontrol elemen draggable yang harus diterima. Pada studi kasus kali ini saya membuat sebuah game edukasi untuk memasangkan nama hewan dalam bahasa inggris dengan bahasa Indonesia dan jika betul maka elemen dropped akan berubah warnanya dan jika salah tidak akan berubah warnanya.Oke teman-teman- langsung saja untuk dapat Membuat Game Edukasi Anak Menggunakan Fungsi Draggable Dan Dropped kita buat terlebih dahulu struktur htmlnya sebagai berikut.

Jika sudah selesai kita langsung saja membuat script jquerynya dan berikut scriptnya ya teman-teman.

<script>      
   $(function() {
            $( "#bird,#rabbit,#ant,#cat" ).draggable();

            $( "#burung" ).droppable({
               accept: "#bird",
               drop: function( event, ui ) {
                  $( this )
                  .addClass( "ui-state-highlight" )
                  .find( "p" )
                  .html( "Dropped!" );
               },  
               out: function (event, ui) {
                  $( this )
                  .removeClass( "ui-state-highlight" )
                  .find( "p" )
                  .html( "Burung" );
               }    
            });
				
            $( "#kelinci" ).droppable({
               accept: "#rabbit",
               drop: function( event, ui ) {
                  $( this )
                  .addClass( "ui-state-highlight" )
                  .find( "p" )
                  .html( "Dropped!" );
               },  
               out: function (event, ui) {
                  $( this )
                  .removeClass( "ui-state-highlight" )
                  .find( "p" )
                  .html( "Kelinci" );
               }      
            });

            $( "#semut" ).droppable({
               accept: "#ant",
               drop: function( event, ui ) {
                  $( this )
                  .addClass( "ui-state-highlight" )
                  .find( "p" )
                  .html( "Dropped!" );
               },  
               out: function (event, ui) {
                  $( this )
                  .removeClass( "ui-state-highlight" )
                  .find( "p" )
                  .html( "Semut" );
               }    
            });

            $( "#kucing" ).droppable({
               accept: "#cat",
               drop: function( event, ui ) {
                  $( this )
                  .addClass( "ui-state-highlight" )
                  .find( "p" )
                  .html( "Dropped!" );
               },  
               out: function (event, ui) {
                  $( this )
                  .removeClass( "ui-state-highlight" )
                  .find( "p" )
                  .html( "Kucing" );
               }    
            });
         });
      </script>

Nah jika sudah maka akan tampil seperti pada gambar di bawah ini.

Dan jika di drag ke elemen yang berwarna orange dan bernilai benar maka akan berubah warna dan jika salah warnanya akan tetap seperti semula.

Demikian artikel tentang cara Membuat Game Edukasi Anak Menggunakan Fungsi Draggable Dan Dropped. Semoga bisa bermanfaat dan selamat mencoba.