Tutorial Membuat Drag and Drop Di HTML 5
Halo sobat blogger semua, kali ini saya ingin berbagi sedikit mengenai html. Yang akan kita bahas pada kesempatan kali ini adalah, bagaimana cara membuat Drag and drop di HTML5? Drag and Drop adalah sebuah fitur yang dapat digunakan menggunakan bahasa pemrogramman HTML5.Sebenarnya juga bisa menggunakan flash, namun jika anda tidak pandai menggunakan flash, bisa juga menggunakan HTML5ini. Maka dari itu, kali ini saya akan memberitahu anda cara membuat fitur drag and drop menggunakan bahasa pemrogramman HTML5. Berikut cara-caranya.
Langkah 1
Seperti biasa, siapkan dulu file yang anda ingin ada fitur drag and drop nya.
Langkah 2
Kita bikin dulu style kotak sebagai tempat untuk pengdrop-an gambar yang di inginkan. Kita buat secara simple saja. Masukkan kode di bawah ini di dalam tag <head>
Kode diatas untuk membuat kotak tempat kita nge drop gambarnya nanti
Langkah 1
Seperti biasa, siapkan dulu file yang anda ingin ada fitur drag and drop nya.
Langkah 2
Kita bikin dulu style kotak sebagai tempat untuk pengdrop-an gambar yang di inginkan. Kita buat secara simple saja. Masukkan kode di bawah ini di dalam tag <head>
<style type="text/css">#posisi {width:350px;height:150px;padding:10px;border:1px solid #aaaaaa;}</style>
Langkah 3 Kita masukin script functionnya, agar kita dapat mengdrag and drop nya. Masukan script ini, dibawah code style yang diatas. Di dalam tag head juga.
Kode diatas adalah function function yang dibutuhkan untuk meng drag and drop konten yang kita inginkan.
<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>
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>
Langkah 4 Kita masukan kode ini ke tempat yang kita ingin kan. Yang pasti tetap berada di dalam tag <body>
agar kotak yang sudah kita buat sebagai tempat drop nya ada, maka kita tambahkan kode yang bagian div id="posisi" agar ada tempat sebagai pengedroppan gambar. Nah, lantas apa yang bisa membuat gambar itu di drag? dengan kode draggable="true" dan ondragstart nya itu. Agar dapat menjalankan fungsi drag and dropnya. Contoh Kode Keseluruhan:
Ok sekian dulu dari saya. Maaf tidak ada contoh disini, tapi anda bisa langsung mempraktekannya. Jika ada yang mau ditanyakan, bisa berkomentar di bawah. Thanks~
<p>Contoh drag and drop</p>
<div id="posisi" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br>
<img id="drag1" src="http://www.duniailmuprogrammer.blogspot.com/images/socials/email.png" draggable="true" ondragstart="drag(event)" width="336" height="100">
<div id="posisi" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br>
<img id="drag1" src="http://www.duniailmuprogrammer.blogspot.com/images/socials/email.png" draggable="true" ondragstart="drag(event)" width="336" height="100">
<!DOCTYPE HTML><html><head><style type="text/css">#posisi {width:350px;height:150px;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></head><body><p>Contoh drag and drop</p><div id="posisi" ondrop="drop(event)" ondragover="allowDrop(event)"></div><br><img id="drag1" src="http://www.duniailmuprogrammer.blogspot.com/images/sicial/email.png" draggable="true" ondragstart="drag(event)" width="336" height="100"></body></html>
