Peristiwa ondragend

Definisi dan penggunaan

Peristiwa ondragend terjadi saat pengguna menyelesaikan menggeser elemen atau pilihan teks.

Geser dan letak adalah fungsi yang umum dalam HTML5. Ini adalah saat Anda "menangkap" objek dan menggesernya ke posisi yang berbeda. Untuk mendapatkan pengetahuan lebih lanjut, baca tentang Tolok Belakang HTML5tutori HTML kami.

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

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

Dalam berbagai tahap operasi geser dan letak, terdapat banyak peristiwa yang digunakan dan mungkin terjadi:

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

  • ondragstart - Terjadi saat pengguna mulai menggeser elemen
  • ondrag - Terjadi saat elemen digeser
  • ondragend - Terjadi saat pengguna menyelesaikan menggeser elemen

Peristiwa yang dijalankan di target tempat tempatkan:

  • ondragenter - Terjadi ketika elemen yang digeser memasuki target tempat
  • ondragover - Terjadi ketika elemen yang digeser berada di target tempat
  • ondragleave - Terjadi ketika elemen yang digeser meninggalkan target tempat
  • ondrop - Terjadi ketika elemen yang digeser ditempatkan di target tempat

Contoh

Eksekusi JavaScript saat pengguna menyelesaikan menggeser elemen <p>:

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

Coba sendiri

Ada lagi contoh TIY di bawah halaman.

Sintaks

Pada HTML:

<elemen ondragend="myScript">

Coba sendiri

Pada JavaScript:

objek.ondragend = function(){myScript};

Coba sendiri

Pada JavaScript, gunakan metoden addEventListener():

objek.addEventListener("dragend", myScript);

Coba sendiri

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

Rincian teknikal

Bubbling: Didukung
Boleh dicabut: Tidak didukung
Jenis peristiwa: DragEvent
Tanda tangan HTML yang didukung: Semua elemen HTML
Versi DOM: Peristiwa Level 3

Dukungan penggunaan peramban

Angka di dalam tabel menunjukkan versi paling awal penggunaan peramban yang mendukung peristiwa ini.

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

Contoh tambahan

Paparan untuk semua kejadian seret-an yang mungkin:

<p draggable="true" id="dragtarget">Seret saya!</p>
<div class="droptarget">Seret di sini!</div>
<script>
/* ----------------- Peristiwa yang diaktifkan di sasaran seret-an ----------------- */
document.addEventListener("dragstart", function(event) {
  // Methode dataTransfer.setData() mengatur jenis dan nilai data yang diseret
  event.dataTransfer.setData("Text", event.target.id);
  // Menyempan beberapa teks semasa mulai menyeret elemen p
  document.getElementById("demo").innerHTML = "Mulai menyeret elemen p.";
  // Mengubah kecerahan elemen yang boleh 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 selepas menyeret elemen p
document.addEventListener("dragend", function(event) {
  document.getElementById("demo").innerHTML = "Selesai menyeret elemen p.";
  event.target.style.opacity = "1";
});
/* ----------------- Peristiwa yang dijalankan di target tempat jatuh ----------------- */
// Saat p elemen yang dapat diangkat memasuki droptarget, ubah 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 pindahan, kita harus menghentikan penggunaan bawaan elemen
document.addEventListener("dragover", function(event) {
  event.preventDefault();
});
// Saat p elemen yang dapat diangkat meninggalkan droptarget, atur ulang gaya garis kotak DIV
document.addEventListener("dragleave", function(event) {
  if ( event.target.className == "droptarget" ) {
    event.target.style.border = "";
  }
});
/* Pada saat jatuh - menghentikan penggunaan bawaan browser untuk data (buka link secara bawaan saat menempatkan) */
Atur ulang warna teks dan warna garis kotak DIV
Dapatkan data yang diangkat menggunakan metode dataTransfer.getData()
Data yang diangkat adalah id elemen yang diangkat ("drag1")
Menyambungkan elemen yang 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 yang berhubungan

Panduan HTML: Pindah dan Tarik HTML5

Panduan HTML: Properti draggable HTML