- Beranda
- Programmer Forum
HTML5: Membuat Drag and Drop
...
TS
16september
HTML5: Membuat Drag and Drop
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 
oke langsung aja.
Langkah 1:
Siapkan dulu file buat bikin drag and drop nya
Langkah 2:
Bikin style nya gan. Ini simple style dari ane. Style ditaro diantara kode < head > dan < / head > ya
Langkah 3:
Nih simple script buat drag and drop nya dari ane gan. Masupin diantara kode < head > dan < / head>
Langkah 4:
Nah ini ditaro dibawah kode < body > dan diatas kode </ body>. Ini simple ya gan, cuma sebagai contoh
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
Code [removed] itu diganti tag pembuka < script > dan penutup </ script > ya gan. jangan pake spasi.
Udah ya gansekian dari ane. jika ada yang ingin ditanyakan lewat komentar, jika ada kesalahan mohon tuntunan. ane nubi di forum ini 
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 oke langsung aja.Langkah 1:
Siapkan dulu file buat bikin drag and drop nya
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
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
sekian dari ane. jika ada yang ingin ditanyakan lewat komentar, jika ada kesalahan mohon tuntunan. ane nubi di forum ini Diubah oleh 16september 07-03-2013 06:43
0
2.2K
6
Guest
Tulis komentar menarik atau mention replykgpt untuk ngobrol seru
Mari bergabung, dapatkan informasi dan teman baru!
Programmer Forum
20.2KThread•4.3KAnggota
Terlama
Guest
Tulis komentar menarik atau mention replykgpt untuk ngobrol seru