Cara Membuat Drag dan Drop Foto Dengan Javascript
Halo teman – teman, apa kabar semuanya. Selamat datang di situs tips dan trik Source Code Aplikasi, berjumpa kembali dengan saya di tips dan trik. Di kesempatan kali ini kita akan belajar mengenai Cara Membuat Drag dan Drop Foto Dengan Javascript dimana pada studi case kali ini kita akan membangun sebuah bingkai gambar sederhana sebanyak 4 bikin dan kita akan menampilkan sebuah gambar di pada diantara bingkai. Kemudian kita akan bikin gambar tersebut dapat di pindahkan di bingkai yang terdapat dengan menggunakan drag and drop javascript , nah bagi demo gambar nya seperti gambar di bawah ini
Kemudian saya pindahkan di bingkai warna kuning dengan mouse, saya tinggal klik tahan dan meletakkan di bingkai warna kuning.
Nah seluruh itu yaitu manfaat drag and drop javascript, gambar dapat di pindahkan di pada bingkai mana saja. Di latihan kali ini sengaja saya bikin sederhana supaya nanti teman – teman dapat menggunakan bahan ini bagi mengembangkannya. Oke lanjut di tips dan trik kali ini mengenai Cara Membuat Drag dan Drop Foto Dengan Javascript teman – teman siapkan text editotnya dan gambarnya kemudian copy script html nya di bawah ini
<html>
<head><br> <title><strong>Cara Merancang Drag dan Drop Image Dengan Javascript</strong></title>
</head>
<body>
<ul>
<li>
<div id=div1 ondrop=drop(event) ondragover=allowDrop(event) ondragstart=drag(event)>
<img id=drag1 src=raisa.png draggable=true ondragstart=drag(event) width=200/>
</div>
</li>
<li>
<div id=div2 ondrop=drop(event) ondragover=allowDrop(event) ondragstart=drag(event)></div>
</li>
<li>
<div id=div3 ondrop=drop(event) ondragover=allowDrop(event) ondragstart=drag(event)></div>
</li>
<li>
<div id=div4 ondrop=drop(event) ondragover=allowDrop(event) ondragstart=drag(event)></div>
</li>
</ul>
</body>
</html>
Kemudian copy css nya
<style>
ul li{list-style: none}
ul li #div1{background: orange}
ul li #div2{background: red}
ul li #div3{background: blue}
ul li #div4{background: yellow}
#div1, #div2,#div3, #div4 {width:199px; margin-right: 20px; height:296px; float: left; padding:10px; border:1px solid #aaaaaa; margin-top: 20px; overflow:hidden}
</style>
Dan save dengan nama index.html, dan jalankan di browsernya.
Karenanya hasil sementara seperti di atas ini, kemudian langkah berikutnya kita berikan manfaat javascrit nya bagi memberikan drag and drop, ketikkan script nya seperti gambar di bawah ini
Jikalau telah save dan refresh di browsernya, lalu gambar dapat di pindahkan di bingkai mana saja. Teman – teman dapat di explore lagi ya dengan latihan kali ini, supaya makin menyukai javascript. Oke saya rasa demikian di artikel kali ini mengenai Cara Membuat Drag dan Drop Foto Dengan Javascript kita berjumpa kembali di tips dan trik yang akan datang. Semoga bermanfaat, terimakasih dan hingga jumpa.
Sumber https://kursuswebsite.org
