API Seret dan Lepas HTML
Dalam HTML, elemen apa pun dapat diseret dan dijatuhkan.
Contoh
Seret gambar W3Schools ke dalam persegi panjang.
Seret dan Jatuhkan
Seret dan lepas adalah fitur yang sangat umum. Itu adalah saat Anda "mengambil" sebuah objek dan menyeretnya ke lokasi yang berbeda.
Dukungan Peramban
Angka-angka dalam tabel menentukan versi browser pertama yang sepenuhnya mendukung Drag and Drop.
| API | |||||
|---|---|---|---|---|---|
| Drag and Drop | 4.0 | 9.0 | 3.5 | 6.0 | 12.0 |
Contoh Seret dan Lepas HTML
Contoh di bawah ini adalah contoh drag and drop sederhana:
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>
Ini mungkin tampak rumit, tetapi mari kita lihat semua bagian yang berbeda dari acara seret dan lepas.
Buat Elemen Dapat Diseret
Pertama-tama: Untuk membuat elemen dapat diseret, setel draggableatribut ke true:
<img draggable="true">
Apa yang Harus Diseret - ondragstart dan setData()
Kemudian, tentukan apa yang harus terjadi ketika elemen diseret.
Dalam contoh di atas, ondragstartatribut memanggil fungsi, drag(event), yang menentukan data apa yang akan diseret.
Metode dataTransfer.setData()ini menetapkan tipe data dan nilai dari data yang diseret:
function drag(ev) {
ev.dataTransfer.setData("text", ev.target.id);
}
Dalam hal ini, tipe datanya adalah "teks" dan nilainya adalah id dari elemen yang dapat diseret ("drag1").
Tempat Drop - ondragover
Acara ondragovermenentukan di mana data yang diseret dapat dijatuhkan.
Secara default, data/elemen tidak dapat dijatuhkan di elemen lain. Untuk mengizinkan penurunan, kita harus mencegah penanganan elemen secara default.
Ini dilakukan dengan memanggil event.preventDefault()metode untuk acara ondragover:
event.preventDefault()
Lakukan Drop - ondrop
Saat data yang diseret dijatuhkan, peristiwa penurunan terjadi.
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));
}
Kode menjelaskan:
- Panggil preventDefault() untuk mencegah penanganan data default browser (default terbuka sebagai tautan saat dijatuhkan)
- Dapatkan data yang diseret dengan metode dataTransfer.getData(). Metode ini akan mengembalikan data apa pun yang disetel ke tipe yang sama dalam metode setData()
- Data yang diseret adalah id dari elemen yang diseret ("drag1")
- Tambahkan elemen yang diseret ke dalam elemen jatuhkan
Lebih Banyak Contoh
Contoh
Cara menyeret (dan melepaskan) gambar bolak-balik antara dua elemen <div>: