- Beranda
- Komunitas
- Tech
- Programmer Forum
HTML5: Membuat Drag and Drop
![16september](https://s.kaskus.id/user/avatar/2011/07/25/avatar3238542_18.gif)
![Avatar border](https://s.kaskus.id/images/avatarborder/1.gif)
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![Big Grin emoticon-Big Grin](https://s.kaskus.id/images/smilies/sumbangan/14.gif)
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![Big Grin emoticon-Big Grin](https://s.kaskus.id/images/smilies/sumbangan/14.gif)
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 ![Malu (S) emoticon-Malu (S)](https://s.kaskus.id/images/smilies/malus.gif)
![Smilie emoticon-Smilie](https://s.kaskus.id/images/smilies/sumbangan/15.gif)
![Ngakak (S) emoticon-Ngakak (S)](https://s.kaskus.id/images/smilies/ngakaks.gif)
Langkah 1:
Siapkan dulu file buat bikin drag and drop nya
![Big Grin emoticon-Big Grin](https://s.kaskus.id/images/smilies/sumbangan/14.gif)
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
![Big Grin emoticon-Big Grin](https://s.kaskus.id/images/smilies/sumbangan/14.gif)
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
![Big Grin emoticon-Big Grin](https://s.kaskus.id/images/smilies/sumbangan/14.gif)
![Malu (S) emoticon-Malu (S)](https://s.kaskus.id/images/smilies/malus.gif)
Diubah oleh 16september 07-03-2013 06:43
0
2.2K
6
![Guest](https://s.kaskus.id/user/avatar/default.png)
![Avatar border](https://s.kaskus.id/images/avatarborder/1.gif)
Tulis komentar menarik atau mention replykgpt untuk ngobrol seru
Urutan
Terbaru
Terlama
![Guest](https://s.kaskus.id/user/avatar/default.png)
![Avatar border](https://s.kaskus.id/images/avatarborder/1.gif)
Tulis komentar menarik atau mention replykgpt untuk ngobrol seru
Komunitas Pilihan