Membuat Drag and Drop pada Website

Membuat Drag and Drop pada Website – Pernah lihat sebuah fitur drag and drop pada suatu website ? Fitur ini biasanya digunakan untuk menarik object ke bagian yang berbeda. Namun dalam beberapa kasus fitur ini tidak berkerja karena tidak supportnya suatu browser. Nah! kali icaksama.com akan berbagi cara membuat fitur drag and drop pada website. Sebelum melangkah ke tutorial, kamu perlu tahu browser apa saja yang mendukung fitur ini.

BrowserChromeIEFirefox Safari Opera
Versi4.09.03.56.012.0

icaksama drag and drop

Membuat Drag and Drop pada Website

Penggunaan program drag and drop ini cukup memanfaatkan HTML dan Javascript. Langsung saja silahkan kamu uji program di bawah ini :

<!DOCTYPE HTML>
<html>
  <head>
    <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>
    <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
    <img id="drag1" src="img_logo.gif" draggable="true"
ondragstart="drag(event)" width="336" height="69">
    </body>
  </html>

Bagian img_logo.gif diganti dengan gambar yang ingin kamu drag.

Penjelasan Program

Program dibawah ini adalah attribut pada tag image yang menentukan bahwa gambar boleh di drag atau tidak, jika tidak maka attribut bernilai false.

<img draggable="true">

Program dibawah ini adalah method javascript yang dipanggil pada attribut ondragstart agar element gambar dapat di drag.

function drag(ev) {
  ev.dataTransfer.setData("text", ev.target.id);
}

attirbut ondragover menentukan di mana data yang di drag dapat dijatuhkan/drop. Secara default, data / elemen tidak dapat dijatuhkan dalam elemen lainnya. Kita harus mencegah penanganan default elemen. Hal ini dilakukan dengan menggunakan event.preventDefault () dalam javascript pada method allowDrop()

event.preventDefault()

Ketika gambar yang di drag dijatuhkan, maka atribut ondrop memanggil method drop (event):

function drop(ev) {
  ev.preventDefault();
  var data = ev.dataTransfer.getData("text");
  ev.target.appendChild(document.getElementById(data));
}

Oke! Demikian tutorial kali ini. Semoga bermanfaat 🙂

Ayo! Segera daftarkan email kamu untuk berlangganan!

Leave a comment