Peristiwa ondrop
Definisi dan penggunaan
Ketika elemen yang dapat digeser atau pilihan teks diposisikan di target penempatan yang berlaku, terjadi event ondrop.
Geser dan lepas adalah fitur yang sangat umum dalam HTML5. Ini adalah saat Anda "menangkap" objek dan menggesernya ke posisi yang berbeda. Untuk mendapatkan pengetahuan lebih lanjut, baca tentang Pindah Tanggam HTML5dalam tutorial HTML kami.
Keterangan:Untuk membuat elemen dapat digeser, gunakan tutorial HTML global Atribut draggable HTML5。
Pesan:Secara default, tautan dan gambar dapat digeser, tanpa perlu atribut draggable.
Pada berbagai tahap operasi geser dan lepas, ada banyak event yang digunakan dan mungkin terjadi:
Event yang diaktifkan di target yang dapat digeser (elemen sumber):
- ondragstart - Terjadi saat pengguna memulai untuk menggeser elemen.
- ondrag - Terjadi saat elemen digeser.
- ondragend - Terjadi saat pengguna menyelesaikan penggeser elemen.
Event yang diaktifkan di target penempatan:
- ondragenter - Terjadi saat elemen yang digeser memasuki target penempatan.
- ondragover - Terjadi saat elemen yang digeser berada di target penempatan.
- ondragleave - Terjadi saat elemen yang digeser meninggalkan target penempatan.
- ondrop - Terjadi saat elemen yang digeser ditempatkan di target penempatan.
Contoh
Pada saat elemen yang dapat digeser ditempatkan di dalam elemen <div>, eksekusi JavaScript:
<div ondrop="myFunction(event)"></div>
Ada banyak contoh TIY di bawah halaman.
Sintaksis
Pada HTML:
<elemen ondrop="myScript">
Pada JavaScript:
objek.ondrop = function(){myScript};
Pada JavaScript, gunakan metode addEventListener():
objek.addEventListener("drop", myScript);
Keterangan:Internet Explorer 8 atau versi yang lebih awal tidak mendukung method addEventListener()。
Detil teknis
| Bubbling： | Didukung |
|---|---|
| Dapat dibatalkan： | Didukung |
| Tipe event： | DragEvent |
| Tag HTML yang didukung： | Semua elemen HTML |
| Versi DOM： | Level 3 Events |
Dukungan Browser
Angka di tabel menunjukkan versi browser pertama yang mendukung event ini.
| Event | Chrome | IE | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| ondrop | 4.0 | 9.0 | 3.5 | 6.0 | 12.0 |
Beberapa contoh lain
Pertunjukan demo dari semua event geser dan lepas yang mungkin:
<p draggable="true" id="dragtarget">Geser saya!</p>
<div class="droptarget">Jatuhkan disini!</div>
<script>
/* ----------------- Event yang diaktifkan di target geser ----------------- */
document.addEventListener("dragstart", function(event) {
// Mengatur jenis dan nilai data yang disetel melalui method dataTransfer.setData()
event.dataTransfer.setData("Text", event.target.id);
// Menyampaikan beberapa teks saat elemen p mulai digeser
document.getElementById("demo").innerHTML = "Mulai geser elemen p.";
// Mengubah kecerahan elemen yang dapat digeser
event.target.style.opacity = "0.4";
});
// Mengubah warna teks output saat elemen p digeser
document.addEventListener("drag", function(event) {
document.getElementById("demo").style.color = "red";
});
// Menyampaikan beberapa teks dan mengatur kecerahan setelah elemen p digeser
document.addEventListener("dragend", function(event) {
document.getElementById("demo").innerHTML = "Selesai geser elemen p.";
event.target.style.opacity = "1";
});
/* ----------------- Peristiwa yang dijalankan di tempat tujuannya ----------------- */
// Saat p element yang dapat diangkut memasuki droptarget, ubah gaya bingkai DIV
document.addEventListener("dragenter", function(event) {
if ( event.target.className == "droptarget" ) {
event.target.style.border = "3px dotted red";
}
});
// Secara bawaan, data tidak dapat diangkut ke dalam elemen lain. Untuk memungkinkan pindah, kita harus menghentikan penanganan bawaan elemen
document.addEventListener("dragover", function(event) {
event.preventDefault();
});
// Saat p element yang dapat diangkut meninggalkan droptarget, atur ulang gaya bingkai DIV
document.addEventListener("dragleave", function(event) {
if ( event.target.className == "droptarget" ) {
event.target.style.border = "";
}
});
/* Pada saat pindah - menghentikan penanganan bawaan browser untuk data (membuka dengan tautan saat diangkut ke tempat tujuannya)
Atur ulang warna teks dan garis bingkai DIV
Ambil data yang diangkut menggunakan metode dataTransfer.getData()
Data yang diangkut adalah id elemen yang diangkut ("drag1")
Tambahkan elemen yang diangkut ke elemen tujuannya
*/
document.addEventListener("drop", function(event) {
event.preventDefault();
if ( event.target.className == "droptarget" ) {
document.getElementById("demo").style.color = "";
event.target.style.border = "";
var data = event.dataTransfer.getData("Text");
event.target.appendChild(document.getElementById(data));
}
});
</script>
