Cara Membuat Drag dan Drop Foto Dengan Javascript

Halo teman – teman, apa kabar semuanya. Selamat datang di website tips dan trik Dumet School, berjumpa kembali dengan saya pada tips dan trik. Pada kesempatan kali ini kita akan belajar tentang Cara Membuat Drag dan Drop Foto Dengan Javascript dimana dalam studi case kali ini kita akan membuat sebuah bingkai foto sederhana sebanyak 4 buat dan kita akan menampilkan sebuah foto di dalam salah satu bingkai. Kemudian kita akan buat foto tersebut bisa di pindahkan pada bingkai yang tersedia dengan menggunakan drag and drop javascript , nah untuk demo gambar nya seperti gambar di bawah ini

Kemudian saya pindahkan di bingkai warna kuning dengan mouse, saya tinggal klik tahan dan meletakkan pada bingkai warna kuning.

Nah semua itu adalah fungsi drag and drop javascript, foto dapat di pindahkan di dalam bingkai mana saja. Pada latihan kali ini sengaja saya buat sederhana supaya nanti teman – teman bisa menggunakan bahan ini untuk mengembangkannya. Oke lanjut pada tips dan trik kali ini tentang 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 Membuat Drag dan Drop Foto 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 pada browsernya.

Maka hasil sementara seperti di atas ini, kemudian langkah selanjutnya kita berikan fungsi javascrit nya untuk memberikan drag and drop, ketikkan script nya seperti gambar di bawah ini

Jika sudah save dan refresh pada browsernya, lalu foto dapat di pindahkan di bingkai mana saja. Teman – teman bisa di explore lagi ya dengan latihan kali ini, supaya makin menyukai javascript. Oke saya rasa sekian pada artikel kali ini tentang Cara Membuat Drag dan Drop Foto Dengan Javascript kita berjumpa kembali pada tips dan trik yang akan datang. Semoga bermanfaat, terimakasih dan sampai jumpa.

Cara Membuat Drag dan Drop Foto Dengan Javascript

Kategori