NgeDrag gambar dengan HTML5
Hallo teman teman balik lagi dengan saya Ismet Maulana kali ini saya ingin berbagi pengetahuan mengenai Bagaimana Cara NgeDrag gambar dengan HTML5, pasti di penasaran gimana caranya, oke seketika saja yah, teman teman dapat salinkan scriptnya dibawah sini :
<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>
<h1>Source Code Aplikasi</h1>
<p>Silahkan Di Drag</p>
<div class=div1 ondrop=drop(event) ondragover=allowDrop(event)>
<img src=http://www.dumetdevelopment.com/images/client/20150421084209.png draggable=true
ondragstart=drag(event) id=drag1 width=88 height=31>
</div>
<div class=div2 ondrop=drop(event) ondragover=allowDrop(event)></div>
<div class=div3 ondrop=drop(event) ondragover=allowDrop(event)></div>
</body>
bagi style css nya :
<style>
.div1, .div2, .div3 {
float: left;
width: 100px;
height: 35px;
margin: 10px;
padding: 10px;
border: 1px solid black;
}
</style>
Bila telah disalin kemudian save dan jalankan dibrowsernya, lumayan gampang bukan? Bila tak berfungsi coba dicek lagi bagian javascriptnya, oke sekianlah panduan mengenai Bagaimana Cara NgeDrag gambar dengan HTML5. Hingga bertemu diartikel berikutnya dan hingga jumpa.
#KeepLearn
#IsmetMA
Sumber https://kursuswebsite.org
