Peristiwa ondragenter

Peristiwa DOM DragEvent

Definisi dan penggunaan

Event ondragenter terjadi saat elemen yang dapat digerakkan atau pilihan teks masuk ke target penempatan yang berlaku.

event ondragenter dan ondragleave dapat membantu pengguna mengerti bahwa elemen yang dapat digerakkan akan masuk atau meninggalkan target penempatan. Misalnya, dapat menetapkan warna latar belakang saat elemen masuk ke target dan menghapus warna saat elemen keluar dari target.

Drag and drop adalah fungsi yang sangat umum dalam HTML5. Ini adalah saat Anda "menangkap" suatu objek dan menggerakkan ke posisi yang lain. Untuk mengetahui lebih lanjut, baca tentang Tolok Berlari HTML5tutorial HTML.

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

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

Dalam berbagai tahap operasi geser dan lepas, banyak event digunakan dan mungkin terjadi:

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

  • ondragstart - Terjadi saat pengguna mulai gerakkan elemen
  • ondrag - Terjadi saat elemen digerakkan
  • ondragend - Terjadi saat pengguna menyelesaikan gerakan elemen yang digerakkan

Event yang diaktifkan di atas target penempatan:

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

Contoh

Eksekusi JavaScript saat elemen yang dapat digerakkan masuk ke target penempatan:

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

Coba sendiri

Ada contoh TIY lebih banyak di bawah halaman.

Sintaksis

Dalam HTML:

<element ondragenter="myScript">

Coba sendiri

Dalam JavaScript:

object.ondragenter = function(){myScript};

Coba sendiri

Dalam JavaScript, gunakan metode addEventListener():

object.addEventListener("dragenter", myScript);

Coba sendiri

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

技术细节

冒泡： 支持
可取消： 支持
事件类型： DragEvent
支持的 HTML 标签： 所有 HTML 元素
DOM 版本： Level 3 Events

浏览器支持

表中的数字注明了完全支持该事件的首个浏览器版本。

事件 Chrome IE Firefox Safari Opera
ondragenter 4.0 9.0 3.5 6.0 12.0

更多实例

对所有可能的拖放事件的演示：

<p draggable="true" id="dragtarget">Gelutanku!</p>
<div class="droptarget">Letak di sini!</div>
<script>
/* ----------------- Peristiwa yang diaktifkan di sisi objek tujuh ----------------- */
document.addEventListener("dragstart", function(event) {
  // Mengatur jenis dan nilai data yang diset di method dataTransfer.setData()
  event.dataTransfer.setData("Text", event.target.id);
  // Menyempan beberapa teks semasa mula menggesek elemen p
  document.getElementById("demo").innerHTML = "Mula menggesek elemen p.";
  // Mengubah kecerahan elemen yang dapat digesek
  event.target.style.opacity = "0.4";
});
// Mengubah warna teks output semasa menggesek elemen p
document.addEventListener("drag", function(event) {
  document.getElementById("demo").style.color = "red";
});
// Menyempan beberapa teks dan mengatur kecerahan selepas menggesek elemen p
document.addEventListener("dragend", function(event) {
  document.getElementById("demo").innerHTML = "Selesai menggesek elemen p.";
  event.target.style.opacity = "1";
});
/* ----------------- Peristiwa yang diaktifkan di titik tujuan pindah ----------------- */
// Saat p element yang boleh dihantar masuk ke droptarget, ubah gaya sempadan DIV
document.addEventListener("dragenter", function(event) {
  if ( event.target.className == "droptarget" ) {
    event.target.style.border = "3px dotted red";
  }
});
// Dalam keadaan bawaan, data / elemen tidak boleh dilepas ke luar elemen lain. Untuk memungkinkan pemindahan, kita harus menghentikan pengolahan bawaan elemen
document.addEventListener("dragover", function(event) {
  event.preventDefault();
});
// Saat p element yang boleh dihantar meninggalkan droptarget, tetapkan gaya sempadan DIV kembali
document.addEventListener("dragleave", function(event) {
  if ( event.target.className == "droptarget" ) {
    event.target.style.border = "";
  }
});
/* Pada saat pindah - Menghentikan pengolahan bawaan pelayar untuk data (buka link bawaan saat meletakkan) */
Tetapkan warna teks output dan warna sempadan DIV kembali
Dapatkan data yang dihantar dengan menggunakan kaedah dataTransfer.getData()
Data yang dihantar adalah ID elemen yang dihantar ("drag1")
Tambah elemen yang dihantar 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

Laman yang berkenaan

Panduan HTML: Pindah dan Tarik HTML5

Buku Rujukan HTML: Sifat draggable HTML

Peristiwa DOM DragEvent