Peristiwa ondrag

DOM Events DragEvent

Definisi dan penggunaan

Peristiwa ondrag terjadi saat elemen atau pilihan teks diseret.

Seret dan lepas adalah fitur yang sangat umum dalam HTML5. Ini adalah saat Anda "menangkap" suatu objek dan menaruhnya ke posisi yang lain. Untuk mengetahui lebih lanjut, baca tentang Tolok Betul HTML5panduan.

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

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

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

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

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

Peristiwa yang dijalankan di atas target tempat:

  • ondragenter - Terjadi saat elemen yang diseret memasuki target tempat.
  • ondragover - Terjadi saat elemen yang diseret berada di atas target tempat.
  • ondragleave - Terjadi saat elemen yang diseret meninggalkan target tempat.
  • ondrop - Terjadi saat elemen yang diseret ditempatkan di target tempat.

Keterangan: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>

亲自试一试

Ada banyak contoh TIY di bawah halaman.

Sintaksis

Pada HTML:

<elemen ondrag="myScript">

亲自试一试

Pada JavaScript:

objek.ondrag = function(){myScript};

亲自试一试

Pada JavaScript, gunakan metode addEventListener():

objek.addEventListener("drag", myScript);

亲自试一试

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

Detil teknis

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

Dukungan browser

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

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

Contoh tambahan

Pertunjukan untuk semua kejadian seret dan lepas yang mungkin:

<p draggable="true" id="dragtarget">Seret saya!</p>
<div class="droptarget">Seret ke sini!</div>
<script>
/* ----------------- Peristiwa yang diaktifkan di target penyeretan ----------------- */
document.addEventListener("dragstart", function(event) {
  // Mengatur jenis dan nilai data yang diseret dengan method dataTransfer.setData()
  event.dataTransfer.setData("Text", event.target.id);
  // Menyempan beberapa teks saat mulai menyeret elemen p
  document.getElementById("demo").innerHTML = "Mulai menyeret elemen p.";
  // Mengubah kecerahan elemen yang dapat diseret
  event.target.style.opacity = "0.4";
});
// Mengubah warna teks output semasa menyeret elemen p
document.addEventListener("drag", function(event) {
  document.getElementById("demo").style.color = "red";
});
// Menyempan beberapa teks dan mengatur kecerahan setelah menyelesaikan penyeretan elemen p
document.addEventListener("dragend", function(event) {
  document.getElementById("demo").innerHTML = "Selesai menyeret elemen p.";
  event.target.style.opacity = "1";
});
/* ----------------- 在放置目标上触发的事件 ----------------- */
// 当可拖动的 p 元素进入 droptarget 时，改变 DIV 的边框样式
document.addEventListener("dragenter", function(event) {
  if ( event.target.className == "droptarget" ) {
    event.target.style.border = "3px dotted red";
  }
});
// 默认情况下，不能在其他元素中放置数据/元素。为了允许放置，我们必须阻止元素的默认处理
document.addEventListener("dragover", function(event) {
  event.preventDefault();
});
// 当可拖动的 p 元素离开 droptarget 时，重置 DIV 的边框样式
document.addEventListener("dragleave", function(event) {
  if ( event.target.className == "droptarget" ) {
    event.target.style.border = "";
  }
});
/* On drop - 防止浏览器对数据的默认处理（默认放置时以链接打开）
重置输出文本的颜色和 DIV 的边框颜色
使用 dataTransfer.getData() 方法获取拖动的数据
被拖拽的数据是被拖拽元素的 id ("drag1")
将被拖动的元素附加到放置元素中
*/
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>

亲自试一试

相关页面

HTML 教程：Tolok Betul HTML5

HTML Reference Manual:Sifat draggable HTML

DOM Events DragEvent