Breaking

Wednesday, November 21, 2012

Membuat Drag And Drop Menggunakan HTML 5

Mylinekerr Code - Drag and drop, adalah sebuah fitur yang dapat digunakan menggunakan bahasa pemrogramman HTML5. Aslinya 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.

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 nanti

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.


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


1 comment:

  1. kami sekeluarga tak lupa mengucapkan puji syukur kepada ALLAH S,W,T
    dan terima kasih banyak kepada AKI atas nomor togel.nya yang AKI
    berikan 4 angka 3167 alhamdulillah ternyata itu benar2 tembus AKI.
    dan alhamdulillah sekarang saya bisa melunasi semua utan2 saya yang
    ada sama tetangga.dan juga BANK BRI dan bukan hanya itu AKI. insya
    allah saya akan coba untuk membuka usaha sendiri demi mencukupi
    kebutuhan keluarga saya sehari-hari itu semua berkat bantuan AKI..
    sekali lagi makasih banyak ya AKI… bagi saudara yang suka main togel
    yang ingin merubah nasib seperti saya silahkan hubungi AKI SOLEH,,di no (((082-313-336-747)))
    insya allah anda bisa seperti saya…menang togel 275
    juta, wassalam.


    dijamin 100% jebol saya sudah buktikan...sendiri....







    Apakah anda termasuk dalam kategori di bawah ini !!!!


    1"Dikejar-kejar hutang

    2"Selaluh kalah dalam bermain togel

    3"Barang berharga anda udah habis terjual Buat judi togel


    4"Anda udah kemana-mana tapi tidak menghasilkan solusi yg tepat


    5"Udah banyak Dukun togel yang kamu tempati minta angka jitunya
    tapi tidak ada satupun yang berhasil..







    Solusi yang tepat jangan anda putus asah....AKI SOLEH akan membantu
    anda semua dengan Angka ritwal/GHOIB:
    butuh angka togel 2D 3D 4D SGP / HKG / MALAYSIA / TOTO MAGNUM / dijamin
    100% jebol
    Apabila ada waktu
    silahkan Hub: AKI SOLEH DI NO: (((082-313-336-747)))




    atau klik langsung di KLIK DSINI BOCORAN TOGEL



    angka GHOIB: singapur 2D/3D/4D/



    angka GHOIB: hongkong 2D/3D/4D/



    angka GHOIB; malaysia



    angka GHOIB; toto magnum 4D/5D/6D/



    angka GHOIB; laos

    ReplyDelete