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 ini di dalam tag <head>
<style type="text/css">
#posisi {width:350px;height:150px;padding:10px;border:1px solid #aaaaaa;}
</style>
Kode diatas untuk membuat kotak tempat kita nge drop gambarnya nantiLangkah 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.
<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>
Kode diatas adalah function function yang dibutuhkan untuk meng drag and drop konten yang kita inginkan.
Langkah 4
Kita masukan kode ini ke tempat yang kita ingin kan. Yang pasti tetap berada di dalam tag <body>
<p>Contoh drag and drop</p> <div id="posisi" ondrop="drop(event)" ondragover="allowDrop(event)"></div> <br> <img id="drag1" src="http://www.jagocoding.com/images/socials/email.png"draggable="true" ondragstart="drag(event)" width="336" height="100">
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:
<!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.jagocoding.com/images/socials/email.png"draggable="true" ondragstart="drag(event)" width="336" height="100"> </body> </html>
Ya sekian dari saya. Maaf tidak ada contoh disini, tapi anda bisa langsung mempraktekannya. Jika ada yang mau ditanyakan, bisa berkomentar.
Tweet
0 Comments
