Peristiwa ondragenter
Definisi dan penggunaan
Event ondragenter terjadi saat elemen yang dapat diseret atau pilihan teks masuk ke target tempat yang berlaku.
event ondragenter dan ondragleave dapat membantu pengguna mengetahui saat elemen yang dapat diseret mendekati atau meninggalkan target tempat. Misalnya, dapat disesuaikan dengan mengatur warna latar belakang saat elemen mendekati target tempat dan menghapus warna saat elemen meninggalkan target tempat.
Seret dan lepas adalah fitur yang sangat umum dalam HTML5. Ini adalah saat Anda "menangkap" suatu objek dan menariknya ke posisi yang berbeda.Untuk mengetahui lebih lanjut, baca referensi kami tentang Pindah dan Jemput HTML5panduan HTML.
Keterangan:Untuk membuat elemen dapat diseret, gunakan Atribut draggable HTML5。
Petunjuk:Secara baku, tautan dan gambar dapat diseret, tanpa atribut draggable.
Dalam berbagai tahap operasi seret dan lepas, banyak event yang digunakan, dan mungkin terjadi:
Event 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.
Event yang diaktifkan di target tempat:
- ondragenter - Terjadi saat elemen yang diangkat masuk ke target tempat.
- ondragover - Terjadi saat elemen yang diangkat berada di atas target tempat.
- ondragleave - Terjadi saat elemen yang diangkat meninggalkan target tempat.
- ondrop - Terjadi saat elemen yang diangkat ditempatkan di target tempat.
Contoh
Eksekusi JavaScript saat elemen yang dapat diangkat masuk ke target tempat:
<div ondragenter="myFunction(event)"></div>
Ada banyak contoh TIY di bawah halaman.
Sintaksis
Pada HTML:
<elemen ondragenter="myScript">
Pada JavaScript:
objek.ondragenter = function(){myScript};
Pada JavaScript, gunakan metode addEventListener():
objek.addEventListener("dragenter", myScript);
Keterangan:Internet Explorer 8 atau versi yang lebih awal tidak mendukung method addEventListener()。
Detil teknis
| Bubbling： | Didukung |
|---|---|
| Dapat dibatalkan： | Didukung |
| Jenis event： | DragEvent |
| Tanda 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 |
|---|---|---|---|---|---|
| ondragenter | 4.0 | 9.0 | 3.5 | 6.0 | 12.0 |
Beberapa contoh lain
Pertunjukan untuk semua event geser dan lepas yang mungkin:
<p draggable="true" id="dragtarget">Geser saya!</p>
<div class="droptarget">Guncang di sini!</div>
<script>
/* ----------------- Event yang diaktifkan di target geser ----------------- */
document.addEventListener("dragstart", function(event) {
// Mengatur jenis dan nilai data yang diset di method dataTransfer.setData()
event.dataTransfer.setData("Text", event.target.id);
// Menampilkan beberapa teks saat elemen p mulai digeser
document.getElementById("demo").innerHTML = "Mulai menggeser 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";
});
// Menampilkan beberapa teks dan me-reset kecerahan setelah elemen p digeser
document.addEventListener("dragend", function(event) {
document.getElementById("demo").innerHTML = "Selesai menggeser elemen p.";
event.target.style.opacity = "1";
});
/* ----------------- Peristiwa yang dijalankan di target penempatan ----------------- */
// Saat elemen p yang dapat diangkat memasuki droptarget, ubah gaya border DIV
document.addEventListener("dragenter", function(event) {
if ( event.target.className == "droptarget" ) {
event.target.style.border = "3px dotted red";
}
});
// Secara bawaan, data/elemen tidak dapat diletakkan di dalam elemen lain. Untuk memungkinkan penempatan, kita harus mencegah penggunaan bawaan elemen
document.addEventListener("dragover", function(event) {
event.preventDefault();
});
// Saat elemen p yang dapat diangkat meninggalkan droptarget, reset gaya border DIV
document.addEventListener("dragleave", function(event) {
if ( event.target.className == "droptarget" ) {
event.target.style.border = "";
}
});
/* Pada saat diletakkan - mencegah penggunaan bawaan browser untuk data (dengan membuka tautan saat menempatkan bawaan)
Reset warna teks output dan warna border DIV
Dapatkan data yang diangkat menggunakan metode dataTransfer.getData()
Data yang diangkat adalah id elemen yang diangkat ("drag1")
Tambahkan elemen yang dapat diangkat ke dalam elemen yang diletakkan
*/
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>
