Peristiwa ondragover

Peristiwa DOM DragEvent

Definisi dan penggunaan

Peristiwa ondragover terjadi saat elemen yang dapat digerakkan atau pilihan teks yang dipilih digerakkan ke target penempatan yang berlaku.

Secara baku, data/elemen tidak dapat dihapus di dalam elemen lain. Untuk memungkinkan penempatan, kita harus mencegah pengendalian baku elemen. Ini dilakukan dengan memanggil metode event.preventDefault() peristiwa ondragover.

Pindah dan lepas adalah fungsi yang sangat umum di HTML5. Ini adalah saat Anda "menangkap" objek dan menggerakkannya ke posisi yang lain. Untuk mendapatkan pengetahuan lebih lanjut, baca tentang Pindah dan Letak HTML5tutorial HTML kami.

Keterangan:Untuk membuat elemen dapat digerakkan, gunakan global Atribut draggable HTML5。

Petunjuk:Secara baku, tautan dan gambar dapat digerakkan, tanpa atribut draggable.

Pada berbagai tahap operasi seret dan lepas, banyak peristiwa yang digunakan dan mungkin terjadi:

Peristiwa yang diaktifkan di target yang dapat digerakkan (elemen sumber):

  • ondragstart - Terjadi saat pengguna memulai gerakan elemen
  • ondrag - Terjadi saat elemen digerakkan
  • ondragend - Terjadi saat pengguna menyelesaikan gerakan elemen

Peristiwa yang diaktifkan di target penempatan:

  • ondragenter - Terjadi saat elemen yang digerakkan memasuki target penempatan
  • ondragover - Terjadi saat elemen yang digerakkan berada di target penempatan
  • ondragleave - Terjadi saat elemen yang digerakkan meninggalkan target penempatan
  • ondrop - Terjadi saat elemen yang digerakkan ditempatkan di target penempatan

Keterangan:Saat elemen digerakkan, peristiwa ondragover diaktifkan setiap 350 milidetik.

Contoh

Eksekusi JavaScript saat elemen diangkat ke target penempatan:

<div ondragover="myFunction(event)"></div>

Coba Sendiri

Ada banyak contoh TIY di bawah halaman.

Sintaksis

Pada HTML:

<elemen ondragover="myScript">

Coba Sendiri

Pada JavaScript:

objek.ondragover = function(){myScript};

Coba Sendiri

Pada JavaScript, gunakan metode addEventListener():

objek.addEventListener("dragover", myScript);

Coba Sendiri

Keterangan:Internet Explorer 8 atau versi yang lebih awal tidak mendukung metode addEventListener()。

Detil teknis

Pembubaran： 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 pertama browser yang mendukung event ini.

Event Chrome IE Firefox Safari Opera
ondragover 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">Gosongkan saya!</p>
<div class="droptarget">Jatuhkan disini!</div>
<script>
/* ----------------- Event yang dijalankan 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";
});
/* ----------------- 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/element tidak dapat ditempatkan di dalam elemen lain. Untuk memungkinkan pindahan, kita harus menghentikan penanganan 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 dijatuhkan - menghentikan penanganan bawaan browser untuk data (buka link bawaan saat dijatuhkan)
Atur ulang warna teks dan garis bingkai DIV
Ambil data yang diangkat menggunakan metode dataTransfer.getData()
Data yang diangkat adalah id elemen yang diangkat ("drag1")
Tambahkan elemen yang dapat diangkat ke 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>

Coba Sendiri

Halaman-Related

Panduan HTML: Pindah dan Taruh HTML5

Panduan Referensi HTML: Properti HTML draggable

Peristiwa DOM DragEvent