NgeDrag gambar dengan HTML5

Hallo teman teman balik lagi dengan saya Ismet Maulana kali ini saya ingin berbagi pengetahuan tentang Bagaimana Cara NgeDrag gambar dengan HTML5, pasti pada penasaran gimana caranya, oke langsung saja yah, teman teman bisa 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>DUMET School</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>

untuk style css nya :

<style>
.div1, .div2, .div3 {
    float: left;
    width: 100px;
    height: 35px;
    margin: 10px;
    padding: 10px;
    border: 1px solid black;
}
</style>

Jika sudah disalin kemudian save dan jalankan dibrowsernya, cukup mudah bukan? Jika tidak berfungsi coba dicek lagi bagian javascriptnya, oke sekian tutorial tentang Bagaimana Cara NgeDrag gambar dengan HTML5. Sampai bertemu diartikel selanjutnya dan sampai jumpa.

#KeepLearn

#IsmetMA