Acara ondragend

Sebelumnya _ Referensi Acara Selanjutnya _

Contoh

Jalankan JavaScript saat pengguna selesai menyeret elemen <p>:

Lebih banyak contoh "Coba Sendiri" di bawah ini.

Definisi dan Penggunaan

Peristiwa ondragend terjadi ketika pengguna telah selesai menyeret elemen atau pemilihan teks.

Seret dan lepas adalah fitur yang sangat umum di HTML5. Itu adalah saat Anda "mengambil" sebuah objek dan menyeretnya ke lokasi yang berbeda. Untuk informasi lebih lanjut, lihat Tutorial HTML kami tentang Seret dan Lepas HTML5 .

Catatan: Untuk membuat elemen dapat diseret, gunakan atribut global HTML5 yang dapat diseret .

Tip: Tautan dan gambar dapat diseret secara default, dan tidak memerlukan atribut yang dapat diseret.

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

Peristiwa yang ditembakkan pada target yang dapat diseret (elemen sumber) :
- ondragstart - terjadi ketika pengguna mulai menyeret elemen
- ondrag - terjadi ketika sebuah elemen sedang diseret
- ondragend - terjadi ketika pengguna telah selesai menyeret elemen

Peristiwa yang ditembakkan pada target jatuh:
- ondragenter - terjadi ketika elemen yang diseret memasuki target jatuh
- ondragover - terjadi ketika elemen yang diseret melebihi target yang dijatuhkan
- ondragleave - terjadi ketika elemen yang diseret meninggalkan target jatuh
- ondrop - terjadi ketika elemen yang diseret dijatuhkan pada target yang dijatuhkan

Dukungan Peramban

Angka-angka dalam tabel menentukan versi browser pertama yang sepenuhnya mendukung acara tersebut.

Event
ondragend	4.0	9.0	3.5	6.0	12.0

Sintaksis

Dalam HTML:

<element ondragend="myScript">

Dalam JavaScript:

object.ondragend = function(){myScript};

Dalam JavaScript, menggunakan metode addEventListener() :

object.addEventListener("dragend", myScript);

Catatan: Metode addEventListener() tidak didukung di Internet Explorer 8 dan versi yang lebih lama.

Detail Teknis

Gelembung:	Ya
Dapat dibatalkan:	Tidak
Jenis acara:	DragEvent
Tag HTML yang didukung:	Semua elemen HTML
Versi DOM:	Acara Tingkat 3

Lebih Banyak Contoh

Contoh

Demonstrasi dari SEMUA kemungkinan peristiwa seret dan lepas:

<p draggable="true" id="dragtarget">Drag me!</p>

<div class="droptarget">Drop here!</div>

<script>
// Events fired on the drag target

document.addEventListener("dragstart", function(event) {
// The dataTransfer.setData() method sets the data type and the value of the dragged data
  event.dataTransfer.setData("Text", event.target.id);

  // Output some text when starting to drag the p element
  document.getElementById("demo").innerHTML = "Started to drag the p element.";

  // Change the opacity of the draggable element
  event.target.style.opacity = "0.4";
});

// While dragging the p element, change the color of the output text
document.addEventListener("drag", function(event) {
document.getElementById("demo").style.color = "red";
});

// Output some text when finished dragging the p element and reset the opacity
document.addEventListener("dragend", function(event) {
  document.getElementById("demo").innerHTML = "Finished dragging the p element.";
  event.target.style.opacity = "1";
});

// Events fired on the drop target

// When the draggable p element enters the droptarget, change the DIVS's border style
document.addEventListener("dragenter", function(event) {
if ( event.target.className == "droptarget" ) {
    event.target.style.border = "3px dotted red";
  }
});

// By default, data/elements cannot be dropped in other elements. To allow a drop, we must prevent the default handling of the element
document.addEventListener("dragover", function(event) {
  event.preventDefault();
});

// When the draggable p element leaves the droptarget, reset the DIVS's border style
document.addEventListener("dragleave", function(event) {
if ( event.target.className == "droptarget" ) {
    event.target.style.border = "";
  }
});

/* On drop - Prevent the browser default handling of the data (default is open as link on drop)
Reset the color of the output text and DIV's border color
Get the dragged data with the dataTransfer.getData() method
The dragged data is the id of the dragged element ("drag1")
Append the dragged element into the drop element
*/
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>