HTML5 Drag and Drop

Drag and drop atau kalau ditranslate tarik dan taruh. Mudahnya fitur html5 drag and drop adalah fitur untuk menarik gambar dari satu posisi ke posisi lain.

Contoh:

Insipirasi dari w3school, kodenya adalah:

<style>
#div1 {
  width: 250px;
  height: 70px;
  padding: 5px;
  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>
<p>Tarik logo puntadewa ke kotak dibawah</p>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

<img style="border:1px solid black; padding:2px" id="drag1" src="https://halamansatu.biz/wp-content/uploads/2020/03/logo-puntadewa-kecil.png" draggable="true" ondragstart="drag(event)" width="200" height="23">

Logika alurnya sebagai berikut:

1. Buat elemen bisa didrag (dragable)

Dalam hal ini adalah gambar, maka diberi atribut draggable menjadi <img draggable="true">

2. Tentukan action apa ketika didrag

Ketika drag dilakukan dengan atribut ondragstart isi value atribut tersebut dengan action memanggil function drag(event).

dataTransfer.setData() adalah metode untuk menentukan tipe data dan value data yang didrag.

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

Dalam hal ini tipe datanya text dengan elemen yang didrag drag1.

3. Tujuan gambar didrop

Tentukan element tujuan tempat gambar dilepas / drop, dengan atribut ondragover yang ditaruh di tempat tujuan dalam hal ini <div id="drag1">.

4. Terakhir do drop

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

Penjabaran:

1. preventDefault() dipanggil dan ambil data dengan metode dataTransfer.getData() 
2. Data yang didrag adalah id tujuan dalam hal ini drag1