Drag and Drop HTML5

Silakan seret gambar CodeW3C.com ke dalam segi empat.

Geser dan Lepas

Geser dan Lepas (Drag and Drop) adalah fitur yang umum. Ini mengacu pada hal Anda menangkap sesuatu dan menaruhnya ke lokasi yang lain.

Geser dan lepas adalah bagian dari standar HTML5: setiap elemen dapat digeser.

Dukungan Browser

Angka di tabel menunjukkan versi browser pertama yang mendukung geser dan lepas sepenuhnya.

API
Geser dan Lepas 4.0 9.0 3.5 6.0 12.0

Contoh HTML Geser dan Lepas

Berikut adalah contoh sederhana tentang geser dan lepas:

Contoh

<!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>

Coba Sendiri

Mungkin terlihat kompleks, tetapi biarkan kita mengelola semua bagian yang berbeda dari peristiwa geser dan lepas.

Buat elemen dapat digeser

Untuk membuat elemen dapat digeser, tetapkan atribut draggable menjadi true:

<img draggable="true">

Isi geser dan lepas - ondragstart dan setData()

Lalu, tentukan apa yang terjadi saat elemen digeser.

Dalam contoh di atas, atribut ondragstart memanggil fungsi drag(event), yang menentukan data yang dapat digeser.

metode dataTransfer.setData() mengatur tipe data dan nilai data yang dapat digeser:

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

Dalam contoh ini, tipe data adalah "text", dan nilai adalah id elemen yang dapat digeser ("drag1").

Tempat untuk Geser - ondragover

Event ondragover menentukan tempat dimana data yang digeser dapat ditempatkan.

Secara bawaan, data/element tidak dapat ditempatkan di dalam elemen lain. Untuk melaksanakan geser dan lepas, kita harus mencegah penanganan bawaan elemen ini.

Tugas ini dilakukan oleh metode event.preventDefault() dari event ondragover:

event.preventDefault();

Melakukan Pemindahan - ondrop

Event drop terjadi saat data yang digeser dilepas.

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

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

Penjelasan Kode:

  • Panggil preventDefault() untuk mencegah penanganan bawaan browser data (tindakan bawaan drop event adalah membuka dalam bentuk tautan)
  • Dapatkan data yang digeser melalui metode getData(dataTransfer); Metode ini akan mengembalikan semua data yang diset di setData() dengan jenis yang sama
  • Data yang digeser adalah id elemen yang digeser ("drag1")
  • Tambahkan elemen yang digeser ke elemen yang ditempatkan

Contoh Lebih Banyak

Geser dan lepas gambar

Bagaimana untuk geser dan lepas gambar di antara dua elemen <div>:

Silakan seret gambar CodeW3C.com ke dalam segi empat.

Coba Sendiri