Peristiwa ondragleave
Definisi dan penggunaan
Peristiwa ondragleave terjadi saat elemen yang dapat diangkat atau pilihan teks meninggalkan target penempatan yang berlaku.
peristiwa ondragenter dan ondragleave dapat membantu pengguna mengerti saat elemen yang dapat diangkat akan masuk atau keluar target penempatan. Misalnya, dapat menetapkan warna latar belakang saat elemen memasuki target penempatan dan menghapus warna saat elemen keluar target.
Geser dan lepas adalah fungsi yang umum di HTML5. Itu seperti saat Anda "menangkap" objek dan menariknya ke posisi yang berbeda. Untuk mengetahui lebih lanjut, baca tentang Pindai HTML5yang disediakan.
Keterangan:Untuk membuat elemen dapat diangkat, gunakan tutorial HTML global Atribut draggable HTML5。
Petunjuk:Secara default, tautan dan gambar dapat diangkat, tanpa atribut draggable.
Pada berbagai tahap operasi geser dan lepas, banyak peristiwa yang digunakan, dan mungkin terjadi:
Peristiwa yang diaktifkan di target yang dapat diangkat (elemen sumber):
- ondragstart - Terjadi saat pengguna mulai menarik elemen
- ondrag - Terjadi saat elemen diangkat
- ondragend - Terjadi saat pengguna menyelesaikan penarikan elemen
Peristiwa yang diaktifkan di target penempatan:
- ondragenter - Terjadi saat elemen yang diangkat memasuki target penempatan
- ondragover - Terjadi saat elemen yang diangkat berada di atas target penempatan
- ondragleave - Terjadi saat elemen yang diangkat keluar target penempatan
- ondrop - Terjadi saat elemen yang diangkat ditempatkan di target penempatan
Contoh
Eksekusi JavaScript saat elemen yang dapat diangkat keluar target penempatan:
<div ondragleave="myFunction(event)"></div>
Ada banyak contoh TIY di bawah halaman.
Sintaksis
Pada HTML:
<elemen ondragleave="myScript">
Pada JavaScript:
objek.ondragleave = function(){myScript};
Pada JavaScript, gunakan metode addEventListener():
objek.addEventListener("dragleave", myScript);
Keterangan:Internet Explorer 8 atau versi yang lebih awal tidak mendukung Metode addEventListener()。
Detil teknis
| Bubbling： | Didukung |
|---|---|
| Dapat dibatalkan： | Tidak didukung |
| Tipe event： | DragEvent |
| Tanda tangan 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 |
|---|---|---|---|---|---|
| ondragleave | 4.0 | 9.0 | 3.5 | 6.0 | 12.0 |
Contoh
Pertunjukan untuk semua event geser dan lepas yang mungkin:
<p draggable="true" id="dragtarget">Gerser 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 oleh 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";
});
/* ----------------- Event yang diaktifkan di target penempatan ----------------- */
// Saat elemen p yang dapat diangkat 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/elemen tidak dapat ditempatkan di dalam elemen lain. Untuk memungkinkan penempatan, kita harus mencegah pengolahan bawaan elemen
document.addEventListener("dragover", function(event) {
event.preventDefault();
});
// Saat elemen p yang dapat diangkat meninggalkan droptarget, atur ulang gaya bingkai DIV
document.addEventListener("dragleave", function(event) {
if ( event.target.className == "droptarget" ) {
event.target.style.border = "";
}
});
/* Pada saat drop - menghentikan pengolahan bawaan browser untuk data (dalam hal menempatkan link bawaan)
Atur ulang warna teks dan garis bingkai DIV
Dapatkan data yang diangkat menggunakan metode dataTransfer.getData()
Data yang dapat diangkat adalah id elemen yang dapat diangkat ("drag1")
Tambahkan elemen yang dapat diangkat ke dalam elemen tujuan
*/
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>
