Peristiwa ondragleave
Definisi dan penggunaan
Acara ondragleave terjadi saat elemen yang dapat diseret atau pilihan teks meninggalkan target tempatkan yang berlaku.
Acara ondragenter dan ondragleave dapat membantu pengguna mengerti saat elemen yang dapat diseret akan masuk atau meninggalkan target tempatkan. Contohnya, dapat menetapkan warna latar belakang saat elemen memasuki target tempatkan dan menghapus warna saat elemen meninggalkan target.
Seret dan lepas adalah fungsi yang sangat umum di HTML5. Itu seperti saat Anda "menangkap" objek dan menariknya ke posisi yang berbeda. Untuk belajar lebih lanjut, baca tentang Tolak Belok HTML5Tutorial HTML.
Keterangan:Untuk membuat elemen dapat diseret, gunakan global Atribut draggable HTML5。
Petunjuk:Secara baku, tautan dan gambar dapat diseret, tanpa atribut draggable.
Pada berbagai tahap operasi seret dan lepas, banyak acara yang digunakan, dan mungkin terjadi:
Acara 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 menarik elemen
Acara yang diaktifkan di target tempatkan:
- ondragenter - Terjadi saat elemen yang diangkat memasuki target tempatkan
- ondragover - Terjadi saat elemen yang diangkat berada di target tempatkan
- ondragleave - Terjadi saat elemen yang diangkat meninggalkan target tempatkan
- ondrop - Terjadi saat elemen yang diangkat ditempatkan di target tempatkan
Contoh
Eksekusi JavaScript saat elemen yang dapat diangkat ditempatkan di target tempatkan:
<div ondragleave="myFunction(event)"></div>
Ada lagi 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 方法 addEventListener()。
Rincian teknikal
| Bubbling: | Didukung |
|---|---|
| Boleh dicabut: | Tidak didukung |
| Jenis peristiwa: | DragEvent |
| Tag HTML yang didukung: | Semua elemen HTML |
| Versi DOM: | Peristiwa Level 3 |
Dukungan browser
Angka di dalam tabel menunjukkan versi pertama browser yang mendukung peristiwa ini.
| Peristiwa | Chrome | IE | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| ondragleave | 4.0 | 9.0 | 3.5 | 6.0 | 12.0 |
Contoh
Pertunjukan untuk semua peristiwa seret dan lepas yang mungkin:
<p draggable="true" id="dragtarget">Seret saya!</p>
<div class="droptarget">Jatuhkan di sini!</div>
<script>
/* ----------------- Peristiwa yang diaktifkan di sisi objek tujuh ----------------- */
document.addEventListener("dragstart", function(event) {
// method dataTransfer.setData() mengatur jenis dan nilai data yang diseret
event.dataTransfer.setData("Text", event.target.id);
// Menyempan teks beberapa semasa mulai menyeret elemen p
document.getElementById("demo").innerHTML = "Mulai menyeret elemen p.";
// Mengubah kecerahan elemen yang dapat diseret
event.target.style.opacity = "0.4";
});
// Mengubah warna teks output semasa menyeret elemen p
document.addEventListener("drag", function(event) {
document.getElementById("demo").style.color = "merah";
});
// Menyempan teks beberapa dan mengatur kecerahan selepas menyeret elemen p
document.addEventListener("dragend", function(event) {
document.getElementById("demo").innerHTML = "Selesai menyeret elemen p.";
event.target.style.opacity = "1";
});
/* ----------------- Peristiwa yang diaktifkan di tujuan penempatan ----------------- */
// Saat p elemen yang dapat digerakkan memasuki droptarget, ubah gaya pinggir DIV
document.addEventListener("dragenter", function(event) {
if ( event.target.className == "droptarget" ) {
event.target.style.border = "3px dotted red";
}
});
// Secara baku, data/element tidak dapat ditempatkan di dalam elemen lain. Untuk memungkinkan penempatan, kita harus menghalangi penggunaan baku elemen
document.addEventListener("dragover", function(event) {
event.preventDefault();
});
// Saat p elemen yang dapat digerakkan meninggalkan droptarget, tetapkan gaya pinggir DIV
document.addEventListener("dragleave", function(event) {
if ( event.target.className == "droptarget" ) {
event.target.style.border = "";
}
});
/* On drop - Halang penggunaan baku pemeriksaan data pereka (dalam tempat tarikan baku untuk membuka sebagai pautan)
Tetapkan warna teks output dan warna pinggir DIV
Dapatkan data yang didrag menggunakan metode dataTransfer.getData()
Data yang didrag adalah id elemen yang didrag ("drag1")
Menyambungkan elemen yang didrag 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>
