Belajar Drag Drop pada HTML5

By Adhi P. - Last updated: Sunday, July 29, 2012 - Save & Share - Comments

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

{

Try This: 4 Langkah Mudah Belajar Cara Membuat Website, Langsung Praktek! KLIK DI SINI!.

var data=ev.dataTransfer.getData(“Text”);

ev.target.appendChild(document.getElementById(data));

ev.preventDefault();

}

 

Penjelasannya adalah :

 

Posted in Belajar HTML5 • Tags: Top Of Page