Cara Drag Dan Drop Dengan HTML 5

Halo, jumpa lagi dengan saya 🙂 apa kabar nya ? semoga baik yah, amin.

Pada artikel kali ini saya akan menjelaskan Cara Drag Dan Drop Dengan HTML 5, Drag dan Drop ini pasti sudah tidak asing lagi dengan kita, apalagi dengan orang yang terbiasa menggunakan komputer setiap hari pasti ada aktivitas dimana kita Drag dan Drop entah itu gambar ataupun yang lain nya, nah kali ini saya akan membuat bagaimana sebuah objek dapat di Drag, langsung saja yuk praktikan.

1. Silahkan buka teks editornya kemudian ketika kode berikut ini.

<!DOCTYPE HTML>
<html>
<head>
<style>
#div1 {width:350px;height:70px;padding:10px;border:1px solid #aaaaaa;}
</style>
<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>

<p>Drag the W3Schools image into the rectangle:</p>

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br>
<img id="drag1" src="http://4.bp.blogspot.com/-e6A3SDKr5bs/UuE9snQmQUI/AAAAAAAABxc/z_VsQly1iVY/s1600/logo.png" draggable="true" 
ondragstart="drag(event)" width="336" height="69">

</body>
</html>

<!DOCTYPE HTML>

<html>

<head>

<style>

#div1 {width:350px;height:70px;padding:10px;border:1px solid #aaaaaa;}

</style>

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>

<p>Drag the W3Schools image into the rectangle:</p>

<br>

<img id="drag1" src="http://4.bp.blogspot.com/-e6A3SDKr5bs/UuE9snQmQUI/AAAAAAAABxc/z_VsQly1iVY/s1600/logo.png" draggable="true"

ondragstart="drag(event)" width="336" height="69">

</body>

</html>

2. Kalo sudah jangan lupa disimpan, kemudian jalankan di browsernya masing-masing, dan lihat hasil nya.

Ok cukup sekian artikel mengenaiÂ Cara Drag Dan Drop Dengan HTML 5, semoga bermanfaat, amin.

Facebook DUMET School

Categories