Skip to content Skip to sidebar Skip to footer
Home / Belajar HTML5

Belajar Drag Drop pada HTML5

HTML5 selanjutnya adalah membahas tentang drag and drop. Drag dan drop adalah bagian dari html5 yang standard dan merupakan feature yang biasa digunakan, ketika anda “grab” suatu obyek dan menggesernya ke lokasi yang berbeda. Nah, di html5 semua elemen dapat di drag and drop. Browser yang support drag and drop adalah mozila firefox, internet explorer 9, google chrome dan safari 5.

Berikut ini adalah contoh sederhana dari drag and drop :

<!DOCTYPE HTML>
 
<html>
 
<head>
 
<script type="text/javascript">
 
function allowDrop(ev)
 
{
 
ev.preventDefault();
 
}
 
  
 
function drag(ev)
 
{
 
ev.dataTransfer.setData("Text",ev.target.id);
 
}
 
  
 
function drop(ev)
 
{
 
var data=ev.dataTransfer.getData("Text");
 
ev.target.appendChild(document.getElementById(data));
 
ev.preventDefault();
 
}
 
</script>
 
</head>
 
<body>
 
  
 
<div id="div1" ondrop="drop(event)"
 
ondragover="allowDrop(event)"></div>
 
<img id="drag1" src="img_logo.gif" draggable="true"
 
ondragstart="drag(event)" width="336" height="69" />
 
  
 
</body>
 
</html>
 
Pada contoh diatas mungkin tampak sedikit rumit, tapi mari kita check ke bagian yang berbeda dari drag and drop event.

Pertama-tama untuk membuat obyek bisa di drag, atur atribut drag menjadi “true”
 
 <img draggable=”true” />

Kemudian, tentukan apa yang harus terjadi ketika elemen diseret. Dalam contoh di atas, atribut ondragstart panggilan fungsi, drag (event), yang menentukan data apa yang akan diseret.

Para dataTransfer.setData () metode menetapkan tipe data dan nilai data diseret:

function drag(ev)
{
ev.dataTransfer.setData(“Text”,ev.target.id);
}

pada kasus ini type datanya adalah “text” dan nilai dari id elemen drag adalah “drag1”

Event ondragover menentukan dimana data diseret dapat diletakkan. Secara default, data / unsur tidak dapat dijatuhkan kedalam unsur lainnya. Untuk memungkinkanya, kita harus mencegah penanganan default dari elemen.

Hal ini dilakukan dengan memanggil event.preventDefault () metode untuk acara ondragover:

event.preventDefault()

Ketika data yang di drag, dijatuhkan (drop) terjadi penurunan. Dalam contoh diatas atribut ondrop memanggil sebuah fungsi drop(event) :

function drop(ev)
{
var data=ev.dataTransfer.getData(“Text”);
ev.target.appendChild(document.getElementById(data));
ev.preventDefault();
}

Penjelasannya adalah :
  • Mendapatkan obyek yang di drag / diseret dengan metode dataTransfer.getData(“Text”) Metode ini akan mengembalikan setiap data yang ditetapkan untuk jenis yang sama dalam setData () metode
  • Data yang diseret adalah id dari elemen diseret (“drag1″)
  • Tambahkan elemen diseret ke elemen penurunan
  • Call preventDefault () untuk mencegah penanganan default browser dari data(standar terbuka sebagai link pada drop)