Drag dan Drop API HTML: Cara Membuat dan Sintak Codenya

Pada HTML, elemen apapun dapat di drag (di seret) dan di drop (di lepaskan).

Section Artikel

1 Drag and Drop
2 Browser Support
3 Contoh drag and drop pada HTML
4 Membuat Elemen Draggable
5 Apa yang di Drag – ondragstart dan setData ()
6 Dimana harus Drop – ondragover
7 Lakukan Drop – ondrop

Drag and Drop

Drag and drop adalah fitur yang sangat umum pada HTML. Penggunaan fitur ini contohnya saat Anda mengambil (grab) sebuah objek dan menyeretnya (drag) ke menempatkan pada lokasi lain (drop).

Browser Support

Angka-angka dalam tabel menentukan versi browser pertama yang sepenuhnya mendukung drag and drop.

API	Chrome	Edge	Firefox	Safari	Opera
Drag and Drop	4.0	9.0	3.5	6.0	12.0

Contoh drag and drop pada HTML

Contoh di bawah ini adalah contoh drag and drop yang sederhana.

<!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 gambar dosenit ke persegi panjang:</p>

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br>
<img id="drag1" src="https://dosenit.com/wp-content/uploads/2020/10/dosen-ti.png" draggable="true" ondragstart="drag(event)" width="336" height="69">

</body>
</html>

Contoh ini mungkin terlihat rumit, tetapi coba lihat semua bagian yang berbeda pada event drag and drop.

Membuat Elemen Draggable

Pertama-tama: Untuk membuat elemen dapat draggable, atur atribut yang dapat diseret menjadi true.

<img draggable="true">

Apa yang di Drag – ondragstart dan setData ()

Kemudian, tentukan apa yang akan terjadi saat elemen di drag.

Pada contoh di atas, atribut ondragstart memanggil sebuah fungsi drag (event) yang menentukan data apa yang akan di drag.

Method dataTransfer.setData () mengatur tipe data dan nilai data yang akan di drag.

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

Dalam kasus ini, tipe datanya adalah “text” dan nilainya adalah id dari elemen yang dapat diseret (“drag1”).

Dimana harus Drop – ondragover

Event ondragover menentukan di mana data yang di drag dapat di drop.

Secara default, data / elemen tidak dapat dibuang di elemen lain. Untuk mengizinkan penurunannya, kita harus mencegah penanganan default elemen.

Hal ini dapat dilakukan dengan memanggil method event.preventDefault () untuk Event ondragover:

event.preventDefault()

Lakukan Drop – ondrop

Saat data yang didrag dijatuhkan (drop) maka terjadi event drop.

Dalam contoh di atas, atribut ondrop memanggil sebuah fungsi, drop (event).

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

Penjelasan Code:

Memanggil preventDefault () untuk mencegah penanganan default browser pada data (aturan default terbuka sebagai link saat drop)
Menyeret data (drag) dengan method dataTransfer.getData (). Metode ini akan mengembalikan data apa pun yang diatur menjadi jenis yang sama pada method setData ()
Data yang didrag adalah id dari elemen yang ditarik (“drag1”)
Tambahkan elemen yang didrag ke dalam elemen drop

Contoh lain :

Cara menyeret (drag) dan melepaskan (drop) gambar bolak-balik antara dua elemen <div>.

<!DOCTYPE HTML>
<html>
<head>
<style>
#div1, #div2 {
  float: left;
  width: 100px;
  height: 35px;
  margin: 10px;
  padding: 10px;
  border: 1px solid black;
}
</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>

<h2>Drag and Drop</h2>
<p>Menyeret (drag) dan  melepaskan (drop) gambar bolak-balik antara dua elemen div.</p>

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
  <img src="https://dosenit.com/wp-content/uploads/2020/10/dosen-ti.png" draggable="true" ondragstart="drag(event)" id="drag1" width="88" height="31">
</div>

<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

</body>
</html>

API html