HTML5: Membuat Drag and Drop

Beranda
Komunitas
Tech
Programmer Forum
HTML5: Membuat Drag and Drop

16september

07-03-2013 13:42

Siang gan

newbie di Programmer forum nih. Kali ini ane mau menjelaskan cara membuat Drag and Drop Menggunakan HTML5. Sebenarnya bisa sih gan selain make HTML5, yaitu make flash. Alias actionscript juga. Tapi ane lebih cinta HTML5 Ketimbang flash emoticon-Ngakak (S)

oke langsung aja.

Langkah 1:
Siapkan dulu file buat bikin drag and drop nya emoticon-Big Grin

Langkah 2:
Bikin style nya gan. Ini simple style dari ane. Style ditaro diantara kode < head > dan < / head > ya

Code:

<style type="text/css">

#posisi {width:350px;height:150px;padding:10px;border:1px solid #aaaaaa;}

</style>

Langkah 3:
Nih simple script buat drag and drop nya dari ane gan. Masupin diantara kode < head > dan < / head>

Code:

[removed]

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));

}

[removed]

Langkah 4:
Nah ini ditaro dibawah kode < body > dan diatas kode </ body>. Ini simple ya gan, cuma sebagai contoh

Code:

<p>Contoh drag and drop</p>

 

<div id="posisi"></div>

<br>

<img id="drag1" src="http://kkcdn-static.kaskus.co.id/themes_2.0/img/home-logo.png" draggable="true">

agar kotak yang sudah kita buat sebagai tempat drop nya ada, maka kita tambahkan kode yang bagian div id="posisi" agar ada tempat sebagai pengedroppan gambar. Nah, lantas apa yang bisa membuat gambar itu di drag? dengan kode draggable="true" dan ondragstart nya itu. Agar dapat menjalankan fungsi drag and dropnya.

Contoh Kode Keseluruhan:
Nih gan contoh kode keseluruhan dari ane emoticon-Big Grin

Code:

<!DOCTYPE HTML>

<html>

<head>

<style type="text/css">

#posisi {width:350px;height:150px;padding:10px;border:1px solid #aaaaaa;}

</style>

[removed]

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));

}

[removed]

</head>

<body>

 

<p>Contoh drag and drop</p>

 

<div id="posisi"></div>

<br>

<img id="drag1" src="http://kkcdn-static.kaskus.co.id/themes_2.0/img/home-logo.png" draggable="true">

 

</body>

</html>

Code [removed] itu diganti tag pembuka < script > dan penutup </ script > ya gan. jangan pake spasi.

Udah ya gan emoticon-Big Grin

sekian dari ane. jika ada yang ingin ditanyakan lewat komentar, jika ada kesalahan mohon tuntunan. ane nubi di forum ini emoticon-Malu (S)

Diubah oleh 16september 07-03-2013 13:43

2.2K

Kutip

Balasan

Komentar yang asik ya

Urutan

Terbaru

Terlama

Komentar yang asik ya

Komunitas Pilihan