Assalamu 'alaikum Wr. Wb.


Akhirnya bisa nge-blog lagi, mumpung ada internet gratis plus sekalian nge-refresh otak gara-gara diforsir untuk ngoding bikin aplikasi kantor.

Kali ini saya akan membahas mengenai HTML 5 yang merupakan pengembangan kelima dari versi HTML. HTML 5 didesain untuk memperbaiki dan mendukung multimedia terbaru.

Salah satu fungsi di HTML 5 adalah drag/drop yang akan dibahas sebagai berikut.

1. Buat tampilan seperti ini.


<style>
#div1,#div2 {width:150px;height:70px;padding:10px;border:1px solid #aaaaaa;}
#left {margin:20px 0px 0px 30px; width:200px;height:100px;padding:10px;border:1px solid #aaaaaa; float:left;}
#right {margin:20px 0px 0px 5px; width:200px;height:100px;padding:10px;border:1px solid #aaaaaa; float:left;}
</style>
<?php
echo"<div id='left'>
    <div id='div1'>
<img src='logo.jpg' height='60'/>
</div>
</div>
<div id='right'>
<div id='div2'></div><br>
</div>";
?>

Simpan script diatas dengan nama file, misal dragdrop.php dan jadikan satu folder dengan logo/gambar, gambar bebas.

2. Sisipkan script berikut di luar tag php atau cssnya.

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

3. Panggil fungsi diatas seperti contoh berikut ini.

Tambahkan ondrop dan ondragover setelah 'div1' dan 'div2'.

<div id='div1' ondrop='drop(event)'ondragover='allowDrop(event)'>

Tambahkan ondrggable , ondragstart dan id didalam tag <img />.

<img src='logo.jpg' height='60' odraggable='true' ondragstart='drag(event)' id='drag1'/>

Jadi, tag htmlnya setelah di ubah menjadi.

echo"<div id='left'>
    <div id='div1' ondrop='drop(event)' ondragover='allowDrop(event)'>
<img src='logo.jpg' height='60' odraggable='true' ondragstart='drag(event)' id='drag1'/>
</div>
</div>
<div id='right'>
<div id='div2' ondrop='drop(event)' ondragover='allowDrop(event)'></div><br>
</div>";

4. Dan coba tarik gambar logo OM ke kotak samping kanan dan hasilnya dibawah ini.

Nah.cukup mudahkan. silahkan dicoba dan lihat hasilnya. Insya Allah bisa.. mohon maaf jika ada kesalahan, mohon sarannya jika masih ada yang perlu diperbaiki, silahkan bertanya jika ada pertanyaan, akan dijawab semaksimal mungkin yang saya bisa, dan jangan menghujat.

Wassalamu 'alaikum Wr. wb.