Event ondrag

Event DOM DragEvent

Definisi dan penggunaan

Peristiwa ondrag terjadi saat elemen atau pilihan teks diseret.

Seret dan lepas adalah fungsi yang sangat umum di HTML5. Itu seperti saat Anda "menangkap" objek dan menaruhnya ke posisi yang lain. Untuk mengetahui lebih lanjut, baca tentang Drag and Drop HTML5tutori kalimat HTML.

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

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

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

Peristiwa yang dijalankan di target yang dapat diseret (elemen asal):

  • ondragstart - Terjadi saat pengguna mulai menyeret elemen
  • ondrag - Terjadi saat elemen diseret
  • ondragend - Terjadi saat pengguna menyelesaikan menyeret elemen

Peristiwa yang dijalankan di target tempat:

  • ondragenter - Terjadi saat elemen yang diseret memasuki target tempat
  • ondragover - Terjadi saat elemen yang diseret berada di tempat target
  • ondragleave - Terjadi saat elemen yang diseret keluar dari target tempat
  • ondrop - Terjadi saat elemen yang diseret ditempatkan di target tempat

Keterangan:Pada saat elemen diseret, peristiwa ondrag dijalankan setiap 350 milidetik.

Contoh

Eksekusi JavaScript saat elemen <p> diseret:

<p draggable="true" ondrag="myFunction(event)">Seret Saya!</p>

Coba sendiri

Ada banyak contoh TIY di bawah halaman.

Sintaksis

Pada HTML:

<element ondrag="myScript">

Coba sendiri

Pada JavaScript:

object.ondrag = function(){myScript};

Coba sendiri

Pada JavaScript, gunakan metode addEventListener():

object.addEventListener("drag", myScript);

Coba sendiri

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

Detil teknis

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

Dukungan Browser

Angka di tabel menandai versi browser pertama yang mendukung event ini.

Event Chrome IE Firefox Safari Opera
ondrag 4.0 9.0 3.5 6.0 12.0

Contoh lebih banyak

Pertunjukan untuk semua event geser-lepas yang mungkin:

<p draggable="true" id="dragtarget">Geser saya!</p>
<div class="droptarget">Tolong letak disini!</div>
<script>
/* ----------------- Event yang diaktifkan 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);
  // Menampilkan beberapa teks saat elemen p dimulai 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 mengatur 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 p elemen yang dapat diangkat memasuki droptarget, merubah gaya bingkai DIV
document.addEventListener("dragenter", function(event) {
  if ( event.target.className == "droptarget" ) {
    event.target.style.border = "3px dotted red";
  }
});
// Secara standar, data/elemen tidak dapat disisipkan ke dalam elemen lain. Untuk memungkinkan penempatan, kita harus mencegah penanganan standar elemen
document.addEventListener("dragover", function(event) {
  event.preventDefault();
});
// Saat p elemen yang dapat diangkat meninggalkan droptarget, menetapkan gaya bingkai DIV
document.addEventListener("dragleave", function(event) {
  if ( event.target.className == "droptarget" ) {
    event.target.style.border = "";
  }
});
/* Pada saat drop - Mencegah penggunaan standar browser untuk data (membuka link saat di drop) */
Menetapkan warna teks output dan warna garis bingkai DIV
Mengambil data yang diangkat menggunakan metode dataTransfer.getData()
Data yang diangkat adalah id elemen yang dapat diangkat ("drag1")
Menyambungkan elemen yang dapat diangkat ke dalam elemen yang dijadikan tempat penempatan
*/
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 yang relevan

HTML Tutorial:Drag and Drop HTML5

Referensi HTML:Properti draggable HTML

Event DOM DragEvent