Cara Membuat Fungsi Drag Drop di Web dengan HTML5

Seperti yang sudah kita ketahui, perkembangan teknologi web sangat berkembang dengan pesat sejak adanya CSS3 dan HTML5. Kedua bahasa itu memungkinkan kita membuat web interaktif dan kreatif sesuai dengan fantasi kita. Dengan CSS3 kita bisa menciptakan efek-efek desain dan animasi keren, dengan HTML5 kita bisa membuat fungsi-fungsi keren.streaming Okja film

Nah, pada posting kali ini, saya akan membahas tutorial membuat fungsi drag dan drop menggunakan HTML5 dengan bantuan javascript. Oke, langsung saja. Pertama-tama kita lihat keseluruhan kodenya :

<!DOCTYPE HTML>
<html>
<head>
<style>
#div1, #div2 {width:300px;height:150px;padding:10px;border:1px solid #aaaaaa;float:left;margin-right:10px;position:relative;overflow:hidden}
</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><p>Drag gambar ke kotak yang lain:</p><div id=”div1″ ondrop=”drop(event)” ondragover=”allowDrop(event)” ondragstart=”drag(event)”>
<img id=”drag1″ src=”http://www.devaradise.com/id/wp-content/uploads/sites/4/2014/11/dragdrop.jpg” draggable=”true” ondragstart=”drag(event)” width=”200″/>
</div>
<br>
<div id=”div2″ ondrop=”drop(event)” ondragover=”allowDrop(event)” ondragstart=”drag(event)”>
</div>
</body>
</html>

Demo :

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

 

Kode diatas bisa langsung anda praktekkan dengan membuat file html baru di komputer anda, lalu menjalankannya di browser. Untuk membuat file html anda cukup buka notepad, paste-kan kode diatas, lalu save as “.html”. Setelah itu, klik 2 kali file html itu untuk dibuka di browser

Penjelasan kode:

1. Pertama, kita mempunyai 2 elemen sebagai wadah untuk gambar yang di drop. Yaitu, tag div dengan id “div1” sebagai wadah gambar sebelum di drag, dan “div2” sebagai wadah untuk gambar ketika di drop. Kedua elemen itu di setting ukuran dan gayanya melalui kode css pada baris kode 5.

2. Kita menambahkan atribut ondrop, ondragover dan ondragstart pada kedua elemen div yang dijadikan sebagai wadah. ketiga atribut itu untuk menjelaskan apa yang bisa/terjadi jika elemen lain(misal:gambar) di drag/drop pada elemen itu. itu adalah atribut HTML5

– ondrop = saat gambar di drop atau ditempatkan di elemen itu
– ondragover = saat gambar yang di drag akan di drop diatas elemen itu
– ondragstart = saat gambar yang ada pada elemen itu di drag untuk dipindahkan ke elemen lain

3. Pada tag img, yaitu tag untuk gambar ditambahkan juga atribut draggable dan ondragstart.

– draggable = atribut untuk mendefinisikan apakah elemen gambar itu bisa di drag atau tidak. nilainya hanya 2, yaitu true atau false

4. Pada masing-masing atribut HTML5 pada elemen-elemen diatas, terdapat beberapa nilai/value yaitu : drop(event), allowDrop(event), drag(event). Ketiga nilai dari atribut ini adalah fungsi yang dibuat dengan javascript pada baris kode 7 sampai 21.

– drop(event) = fungsi untuk drop elemen.
– drag(event) = fungsi untuk drag elemen.
– allowDrop(event) = fungsi untuk mengijinkan bahwa elemen yang di drag dapat di drop atau ditempatkan pada elemen tersebut.

Yap. begitulah.. Selamat mencoba. Kalau bingung, jangan sungkan nanya di komentar.

~Semoga bermanfaat!~

 

5 Comments

  1. wah makasih udah sharing mas 😀 baru liat drag drop ini dengan HTML 5 Valid 😀

  2. Menjalankannya di bowser. Bowser itu apa?

  3. bisa dicoba nih…

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *