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>
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>
1
2
3
| <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.
Kita masukin script functionnya, agar kita dapat mengdrag and drop nya. Masukan script ini, dibawah code style yang diatas. Di dalam tag <head> juga.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
| <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>
Kita masukan kode ini ke tempat yang kita ingin kan. Yang pasti tetap berada di dalam tag <body>
1
2
3
4
5
| <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.
Tidak ada komentar:
Posting Komentar