Jom Belajar "Drag and Drop" dalam HTML !!! (Genius Corner Siri 22)

Tajuk: Drag and Drop dalam HTML

Genius Corner Siri 22

Oleh: Fariz Gaskin

 

Salam lebaran buat semua pembaca budiman. Kami berharap ibadah puasa di bulan Ramadan lalu telah dijalani dengan baik, dan pastinya Syawal kali ini membawa seribu keberkatan di dalam tahun 2017 ini.

 

Kita bertemu kembali di dalam ruangan Genius Corner minggu ini, bersama latihan HTML5 bahagian yang ke-enam. Kali ini, kita akan pelajari kaedah Drag and Drop yang sangat penting di dalam pembinaan games dan perisian e-learning berasaskan web.

 

Jika anda pernah bermain games Word Mania di dalam 1BestariNet, anda pasti arif tentang kaedah permainan game tersebut. Pemain dikehendaki menyeret dan melepaskan huruf ke dalam ruang yang disediakan untuk menghasilkan perkataan tertentu.

 

Jumlah dan jenis huruf yang diguna akan menentukan jumlah markah bagi setiap perkataan yang terbina. Kaedah yang sama digunakan di dalam permainan Scrabble, di mana setiap keping huruf dan setiap petak pada papan Scrabble mempunyai nilai tersendiri.

 

Menggunakan kaedah terbina dalam HTML5, anda tidak memerlukan latihan yang banyak untuk menghasilkan games ibarat Scrabble milik anda sendiri. Tanpa membuang masa, mari kita mulakan latihan minggu ini.

 

Latihan

 

Langkah 1: Buka mana-mana text editor yang anda miliki seperti Notepad (Windows) atau TextEdit (MacOS) dan tuliskan kod aturcara berikut.

 

<!DOCTYPE HTML>

<html>

<head>

<style>

#div1, #div2 {

   float: left;

   width: 100px;

   height: 35px;

   margin: 10px;

   padding: 10px;

   border: 1px solid black;

}

</style>

<script>

function allowDrop(ev) {

   ev.preventDefault();

}

function drag(ev) {

   ev.dataTransfer.setData(“text”, ev.target.id);

}

function drop(ev) {

   ev.preventDefault();

   var data = ev.dataTransfer.getData(“text”);

   ev.target.appendChild(document.getElementById(data));

}

</script>

</head>

<body>

<h2>Drag and Drop</h2>

<p>Drag the image back and forth between the two div elements.</p>

<div id=”div1″ ondrop=”drop(event)” ondragover=”allowDrop(event)”>

 <img src=”tracdisklogo.jpg” draggable=”true” ondragstart=”drag(event)” id=”drag1″ width=”88″ height=”31″>

</div>

<div id=”div2″ ondrop=”drop(event)” ondragover=”allowDrop(event)”></div>

</body>

</html>

 

Langkah 2: Save hasil kerja anda tadi dengan nama dragdrop.html ke dalam folder Genius Corner seperti latihan terdahulu.

 

Langkah 3: Double-click fail tadi untuk melihat hasilnya melalui pelayar web.

Semakan

 

Di dalam kod aturcara tadi, kita telah menghasilkan tiga fungsi berbeza iaitu allowDrop(), drag() dan drop(). Fungsi drag() telah ditetapkan kepada imej yang akan diseret ke dalam mana-mana <div> antara div1 dan div2.

 

Setiap <div> pula ditetapkan fungsi drop() untuk menerima imej drag(), dan fungsi allowDrop() untuk membenarkan operasi drop (letak) dijalankan. Di dalam kedua-dua fungsi tadi, method setData() dan getData() dari library dataTransfer digunakan untuk mengawal ‘perpindahan’ objek drag1 dari div1 ke div2 dan kembali.

 

Walau ringkas, asas inilah yang digunakan dalam kebanyakan perisian dan games e-learning. Kami yakin anda mampu menghasilkan sebuah kod aturcara yang lebih menarik dan canggih dengan menggabungkan kod aturcara dari artikel Genius Corner yang terdahulu seperti <canvas> atau <svg>.

Guru dan pelajar SK Desa Murni berbincang menyiapkan projek Scratch TMK

 

Soalan

 

Sebelum ruangan minggu ini ditamatkan, anda perlu menyelesaikan beberapa soalan latihan. Sila ubahsuai kod aturcara tadi supaya:

 

  1. Ubah kod supaya lebih dari dua <div> boleh digunakan untuk operasi ini.
  2. Ubah kod supaya lebih dari satu <img> boleh digunakan untuk operasi ini.
  3. Hasilkan sebuah puzzle yang mempunyai 9 <div> dan 8 <img>.

 

Jika anda mempunyai sebarang pertanyaan atau cadangan, sila emelkan kepada farizgaskin@gmail.com dan kami akan cuba jawab sepantas mungkin. Sehingga bertemu lagi dalam ruangan yang sama minggu hadapan, selamat mencuba!

 

Akhirkata, selamat menyambut Hari Raya Aidilfitri bersama keluarga tersayang.

 

Leave a Reply

Your email address will not be published. Required fields are marked *