Drag dan Drop adalah bagian dari standar HTML5 dan sudah menjadi fitur umum, cara kerjanya adalah saat Anda “mengambil” lalu menariknya ke lokasi yang telah disediakan.
Belajar HTML5 Drag and Drop
Di bawah ini adalah spesifikasi browser yang mendukung fitur Drag and Drop:
Contoh:
<html>
<!-- bundet.com -->
<head>
</head>
<body>
<h1>Drag and Drop1</h1>
<p>Drag gambar ke dalam persegi panjang</p>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
</div>
<br />
<img id="drag1" src="110.jpg" draggable="true" ondragstart="drag(event)" width="336" height="80">
</body>
</html>
<style type="text/css">
#div1 {
width :350px;
height :100px;
padding :10px;
border :1px solid #aaaaaa
}
</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>
Hasilnya sebagaimana ditunjukan pada gambar demo diatas. Code di atas mungkin tampak rumit jika kita melihatnya secara menyeluruh, tapi mari kita coba kupas satu persatu setiap komponennya:
1. Membuat Elemen Draggable
Pertama-tama kita atur attribute dragable menjadi “true”
Apa yang harus ditarik - ondragstart dan setData()
Lalu, tentukan apa yang harus terjadi ketika elemen diseret. Dalam contoh di atas, atribut ondragstart memanggil fungsi, drag(event), bahwasannya menentukan data apa yang akan diseret.
The dataTransfer.setData() adalah metode pengaturan untuk tipe data dan nilai data yang diseret:
Pada bagian ini, tipe data “text” menunjukan nilai id elemen draggable (“drag1”).
2. Dimana tempat untuk Drop - ondragover?
Even ondragover menentukan dimanakah data Drag dapat dijatuhkan. Secara default, data/elemen tidak dapat dijatuhkan dalam elemen lainnya. Untuk mengizinkan sebuah Drop, maka kita harus mencegah penanganan default elemen.
Hal ini dilakukan dengan memanggil event.preventDefault() metode untuk even ondragover:
ev.preventDefault();
3. Melakukan Drop - ondrop
Ketika data yang diseret dijatuhkan, drop event terjadi. Dalam contoh di atas, atribut ondrop memanggil fungsi, drop (event):
Penjelasan Code:
- Panggil preventDefault() untuk mencegah penanganan browser secara default (terbuka sebagai link pada drop)
- Dapatkan data yang diseret dengan metode dataTransfer.getData(). Metode ini akan mengembalikan setiap data dengan tipe data yang sama sebagaimana telah ditetapkan di dalam method setData()
- Data yang diseret adalah id dari elemen data yang diseret (“drag1”)
- Menambahkan elemen yang diseret ke elemen Drop.
