Membuat Permainan Drag and Drop Sederhana dengan HTML5

Lebaran sebentar lagi.. Mari sempatkan untuk bersih-bersih blog yang udah sawangan..😀

Okey, kali ini saya akan sedikit membahas tentang drag and drop pada HTML5 klo kemaren pke engine Construct2 sekarang kita cuma butuh Notepad++ atau editor text sesuka kamu.

Skenarionya:
1. Huruf Hijaiyah (Alif, ba, ta) tipe filenya gambar format bisa .png atau .jpg. Bagian ini merupakan obyek yang bisa ditarik (drag).
2. Alif, Ba, Ta yang ada dibawah merupakan area drop (dropzone) yang merupakan tempat peletakan dari huruf yang di-drag tadi.

Untuk mencoba sourcenya silahkan download disini dan jalankan melalui browser. Pastikan browser sudah mendukung HTML5.

Screenshoot hasilnya:
posting_hijaiyah

Karena source panjang, disini saya cuma bahas potongan-potongan intinya saja:
Javascript Function
function dragStart(ev) {
ev.dataTransfer.effectAllowed=’move’;
ev.dataTransfer.setData(“Text”, ev.target.getAttribute(‘id’));
ev.dataTransfer.setDragImage(ev.target,0,0);
return true;
}
function dragEnter(ev) {
event.preventDefault();
return true;
}
function dragOver(ev) {
return false;
}
function dragDrop(ev) {
var src = ev.dataTransfer.getData(“Text”);
ev.target.appendChild(document.getElementById(src));
ev.stopPropagation();
return false;
}

5 Comments »

  1. Tuan Pembual Said:

    kodenya taroh di github aja mbak :))

    • amey Said:

      gk punya akun github kakak… :p

      makasih masukannya *ditampung…🙂

  2. jawarif Said:

    siip

  3. Leticia Bartlett Said:

    menarik

  4. hehe… ada-ada aja yang posting ini
    semua pemakai notepad di undang make secured notepad untuk nyimpen ginian ya

    http://www.fgroupindonesia.com/2014/03/download-snotepad.html


{ RSS feed for comments on this post} · { TrackBack URI }

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: