Peristiwa ondragover

Definisi dan penggunaan

Peristiwa ondragover terjadi saat elemen yang dapat digerakkan atau pilihan teks yang digerakkan ditarik 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 dapat dilakukan dengan memanggil method event.preventDefault() dari peristiwa ondragover.

Seret dan lepas adalah fitur yang sangat umum dalam HTML5. Itu seperti saat Anda "menangkap" objek dan menggerakkannya ke lokasi yang lain. Untuk mendapatkan pengetahuan yang lebih banyak, baca tentang Tarik Turun HTML5tutorial HTML kami.

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

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

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

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

ondragstart - Terjadi saat pengguna mulai menarik elemen
ondrag - Terjadi saat elemen digerakkan
ondragend - Terjadi saat pengguna menyelesaikan gerakan menarik elemen

Peristiwa yang dijalankan 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 dijalankan setiap 350 milidetik.

Contoh

Eksekusi JavaScript saat elemen diangkat ke target penempatan:

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

Coba sendiri

Ada contoh TIY yang lebih banyak di bawah halaman.

Sintaksis

Pada HTML:

<element ondragover="myScript">

Coba sendiri

Pada JavaScript:

object.ondragover = function(){myScript};

Coba sendiri

Pada JavaScript, gunakan method addEventListener():

object.addEventListener("dragover", myScript);

Coba sendiri

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

Detil teknis

Bubbling：	Didukung
Dapat dibatalkan：	Didukung
Tipe peristiwa：	DragEvent
Tag HTML yang didukung：	Semua elemen HTML
Versi DOM：	Peristiwa Level 3

Dukungan browser

Angka di tabel menunjukkan versi browser pertama yang mendukung peristiwa ini.

Peristiwa	Chrome	IE	Firefox	Safari	Opera
ondragover	4.0	9.0	3.5	6.0	12.0

Beberapa contoh lain

Pertunjukan untuk semua peristiwa yang mungkin terjadi dalam gerakan serupai ini:

<p draggable="true" id="dragtarget">Tolong gerakkan saya!</p>
<div class="droptarget">Tolong turunkan di sini!</div>
<script>
/* ----------------- Peristiwa yang dijalankan di target gerakan ----------------- */
document.addEventListener("dragstart", function(event) {
  // Mengatur jenis dan nilai data yang diset di method dataTransfer.setData()
  event.dataTransfer.setData("Text", event.target.id);
  // Menyampaikan beberapa teks saat mulai menggerakkan elemen p
  document.getElementById("demo").innerHTML = "Mulai menggerakkan elemen p.";
  // Mengubah kecerahan elemen yang dapat digerakkan
  event.target.style.opacity = "0.4";
});
// Mengubah warna teks output saat menggerakkan elemen p
document.addEventListener("drag", function(event) {
  document.getElementById("demo").style.color = "red";
});
// Menyampaikan beberapa teks dan mengatur kecerahan setelah menggerakkan elemen p
document.addEventListener("dragend", function(event) {
  document.getElementById("demo").innerHTML = "Selesai menggerakkan elemen p.";
  event.target.style.opacity = "1";
});
/* ----------------- Peristiwa yang diaktifkan di target penempatan ----------------- */
// Saat p elemen yang dapat diseret memasuki droptarget, mengubah gaya garis kotak DIV
document.addEventListener("dragenter", function(event) {
  if ( event.target.className == "droptarget" ) {
    event.target.style.border = "3px dotted red";
  }
});
// Secara bawaan, data dan elemen tidak dapat ditempatkan di dalam elemen lain. Untuk memungkinkan penempatan, kita harus mencegah penanganan bawaan elemen
document.addEventListener("dragover", function(event) {
  event.preventDefault();
});
// Saat p elemen yang dapat diseret meninggalkan droptarget, menetapkan gaya garis kotak DIV
document.addEventListener("dragleave", function(event) {
  if ( event.target.className == "droptarget" ) {
    event.target.style.border = "";
  }
});
/* Pada saat jatuh - mencegah penggunaan bawaan browser untuk data (membuka tautan saat di tempatkan) */
Menetapkan warna teks output dan warna garis kotak DIV
Mengambil data yang diseret menggunakan method dataTransfer.getData()
Data yang diseret adalah id elemen yang diseret ("drag1")
Menyambungkan elemen yang diseret 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>

Coba sendiri