Pada sore ini saya akan sedikit akan bermain dengan sesuatu yang bisa di pindah-pindah, bukan karena saya baru pindahan ya, oke pindah disini dimana saya mempunyai sebuah konten gambar yang nantinya gambar itu akan bisa saya pindahkan dari kotak satu ke kotak yang sebelahnya, walupun terlihat simple, tapi membuat seperti itu butuh pemahaman javascript ya, karena belajar cara drag dan drop dengan menggunakan javascript, hayo yang belum pernah belajar Javascriptnya saya harap belajar dulu ya teman-teman, ok jangan kemana-mana ya teman-teman.
untuk membuat atau cara drag dan drop dengan menggunakan javascript, saya mendapatkan refrensinnya dari w3school ya teman-teman.saya melihat cara ini wajib di coba karena berguna sekali untuk membuat efeknya, sepeerti yang saya jelaskan pada paragraf pertama, nantinya disini saya akan membuat sebuah konten dimana konten itu bisa kita geser ke sebelahnya, bisa kita pindahkan ke sebelahnya seperti itu ya teman-teman.
oke langsung saja strukuturnya seperti ini ya
|
1 2 3 4 5 6 7 |
<h2>Cara Mendrag dan Drop dengan Menggunakan Javascript</h2> <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"> <img src="gambar.png" draggable="true" ondragstart="drag(event)" id="drag1" width="88" height="31"> </div> <div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div> |
Dikit ya teman-teman , memang saya akan langsung fokus ke prosesnya saja dari pada tampilannya, oke lalu bagaimana dengan javascriptnya, kita lihat:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<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> |
jadi jika teman-teman perhatikan pada struktur HTMLnya dan javascriptnya, kita menggunakan event onclick, contoh ini saya lihat ada di sebuah HTML API, oke mari sekarang kita lihat struktur lengkap HTML dan Javascriptnya:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Cara Mendrag dan Drop dengan Menggunakan Javascript</title> <style type="text/css"> #div1, #div2 { float: left; width: 100px; height: 35px; margin: 10px; padding: 10px; border: 1px solid black; } .container{ width: 800px; margin: auto; } </style> </head> <body> <div class="container"> <h2>Cara Mendrag dan Drop dengan Menggunakan Javascript</h2> <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"> <img src="gambar.png" draggable="true" ondragstart="drag(event)" id="drag1" width="88" height="31"> </div> <div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div> <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> </div> </body> </html> |
OKe sekarang kita lihat hasil sebelumnya di pindahkan:
sebelum di pindahkan dan sesudah di pindahkan:
Bagaimana cukup menarik ta teman-teman, dan saya rasa cukup sampai disini belajar kita tentang cara drag dan drop dengan menggunakan javascript, semoga bermanfaat dan sampai jumpa pada artikel selanjutnya, terimakasih.