Pindah HTML5

Silakan seret gambar CodeW3C.com ke dalam segi empat.

Penarikan dan Lepas

Penarikan dan lepas (Drag dan Drop) adalah fitur yang umum. Ini berarti Anda dapat menarik sesuatu dan meletakkannya di tempat lain.

Penarikan dan lepas adalah bagian dari standar HTML5: semua elemen dapat digerakkan.

Dukungan Browser

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

API
Penarikan dan Lepas 4.0 9.0 3.5 6.0 12.0

Contoh HTML Penarikan dan Lepas

Berikut adalah contoh sederhana tentang penarikan 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, namun biarkan kita mempelajari semua bagian yang berbeda dari peristiwa penarikan dan lepas.

Buat elemen dapat digerakkan

Pertama: untuk membuat elemen dapat digerakkan, atur atribut draggable ke true:

<img draggable="true">

Isi penarikan dan lepas - ondragstart dan setData()

Lalu, tentukan apa yang terjadi saat elemen digerakkan.

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

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

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

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

Tempat Menempatkan - ondragover

Peristiwa ondragover menentukan dimana data yang digeser dapat ditempatkan.

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

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

event.preventDefault();

Melakukan Pemindahan - ondrop

Ketika data yang diseret dilepas, akan terjadi peristiwa drop.

Dalam contoh di atas, properti ondrop dipanggil sebuah 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 event drop adalah membuka sebagai tautan)
  • Dapatkan data yang diseret melalui metode getData(dataTransfer);. Metode ini akan mengembalikan semua data yang diset sama seperti tipe data yang diset di metode setData().
  • Data yang diseret adalah id elemen yang diseret ("drag1")
  • Menambahkan elemen yang diseret ke dalam elemen tujuan

Contoh Lainnya

Geser dan lepas gambar

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

Silakan seret gambar CodeW3C.com ke dalam segi empat.

Coba Sendiri