Pindahan HTML5

Silakan seret gambar CodeW3C.com ke dalam kotak persegi.

Seret dan Lepas

Seret dan Lepas (Drag and 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 tabel menunjukkan versi browser pertama yang mendukung seret dan lepas sepenuhnya.

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

Sekitar ini: 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 ("drag1").

Tempat untuk Menempatkan - ondragover

Acara ondragover menentukan tempat mana 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 Penempatan - ondrop

Acara drop terjadi ketika 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));
}

Pengertian Kode:

  • Panggil preventDefault() untuk mencegah penanganan bawaan browser data (default penanganan acara drop adalah membuka dalam bentuk tautan)
  • Dapatkan data yang diseret melalui metode getData() dataTransfer. Metode ini akan mengembalikan semua data yang diset jenis yang sama di metode setData()
  • Data yang diseret adalah id elemen yang diseret ("drag1")
  • Tambahkan elemen yang diseret ke dalam 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 kotak persegi.

Coba Sendiri