Pindahan HTML5

Silakan seret gambar CodeW3C.com ke dalam persegi

Seret dan Lepas

Seret dan lepas (Drag dan Drop) adalah fitur yang umum. Ini mengacu pada hal Anda menangkap sesuatu dan menaruhnya di tempat lain.

Seret dan lepas adalah bagian dari standar HTML5: setiap elemen dapat diseret.

Dukungan Browser

Angka di dalam tabel menunjukkan versi browser pertama yang mendukung seret dan lepas.

API
Seret dan Lepas 4.0 9.0 3.5 6.0 12.0

Contoh HTML Seret dan Lepas

Berikut adalah contoh sederhana tentang seret 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 mengkaji semua bagian yang berbeda dari peristiwa seret dan lepas.

Membuat elemen dapat diseret

Pertama: untuk membuat elemen dapat diseret, atur atribut draggable menjadi true:

<img draggable="true">

Kandungan seret dan lepas - ondragstart dan setData()

Lalu, tentukan apa yang terjadi saat elemen diseret.

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

dataTransfer.setData() method mengatur jenis data dan nilai data yang diseret:

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

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

Tempat Menempatkan - ondragover

Acara ondragover menentukan tempat dimana data yang diseret dapat ditempatkan.

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

Tugas ini diselesaikan oleh metode event.preventDefault() acara ondragover:

event.preventDefault()

Melakukan Pemindahan - ondrop

Acara drop terjadi saat data yang diseret dilepas.

Dalam contoh di atas, properti 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 (default penanganan acara drop adalah membuka seperti tautan)
  • Dapatkan data yang diseret melalui metode getData() dataTransfer. Metode ini akan mengembalikan semua data yang diset sama seperti tipe di metode setData()
  • Data yang diseret adalah id elemen yang diseret ("drag1")
  • Menambahkan elemen yang diseret ke elemen yang ditempatkan

Contoh Lebih Banyak

Seret dan Lepaskan Gambar

Bagaimana untuk menyeret dan melepaskan gambar di antara dua elemen <div>:

Silakan seret gambar CodeW3C.com ke dalam persegi

Coba Sendiri