Peristiwa ondragend
Definisi dan penggunaan
Event ondragend terjadi saat pengguna menyelesaikan geser elemen atau pilihan teks.
Geser dan lepas adalah fungsi yang umum dalam HTML5. Ini adalah saat Anda "menangkap" objek dan menaruhnya ke posisi yang berbeda. Untuk mendapatkan pengetahuan lebih lanjut, baca tentang Pindah dan Letak HTML5tutori HTML kami.
Keterangan:Untuk membuat elemen dapat digerakkan, gunakan global Atribut draggable HTML5。
Petunjuk:Secara default, tautan dan gambar dapat digerakkan tanpa properti draggable.
Pada berbagai tahap operasi seret dan lepas, terdapat banyak event yang digunakan dan mungkin terjadi:
Event yang diaktifkan di target dapat digerakkan (elemen sumber):
- ondragstart - Terjadi saat pengguna mulai menggerakkan elemen.
- ondrag - Terjadi saat elemen digerakkan.
- ondragend - Terjadi saat pengguna menyelesaikan geser elemen.
Event yang diaktifkan di target penempatan:
- ondragenter - Terjadi saat elemen yang digerakkan memasuki target penempatan.
- ondragover - Terjadi saat elemen yang digerakkan berada di 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 pengguna menyelesaikan geser <p> elemen:
<p draggable="true" ondragend="myFunction(event)">Seret Saya!</p>
Ada banyak contoh TIY di bawah halaman.
Syarat
Pada HTML:
<elemen ondragend="myScript">
Pada JavaScript:
objek.ondragend = function() {myScript};
Pada JavaScript, gunakan metode addEventListener():
objek.addEventListener("dragend", myScript);
Keterangan:Internet Explorer 8 atau versi yang lebih awal tidak mendukung Metode addEventListener()。
Detil teknis
| Bubbling： | Didukung |
|---|---|
| Dapat dibatalkan： | Tidak didukung |
| Tipe peristiwa： | DragEvent |
| Tag HTML yang didukung： | Semua elemen HTML |
| Versi DOM： | Peristiwa Level 3 |
Dukungan Browser
Angka di tabel menandai versi browser pertama yang mendukung peristiwa ini.
| Peristiwa | Chrome | IE | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| ondragend | 4.0 | 9.0 | 3.5 | 6.0 | 12.0 |
Beberapa contoh lain
Pertunjukan untuk semua peristiwa geser dan lepas yang mungkin:
<p draggable="true" id="dragtarget">Geser saya!</p>
<div class="droptarget">Jatuhkan disini!</div>
<script>
/* ----------------- Peristiwa yang dijalankan di target geser ----------------- */
document.addEventListener("dragstart", function(event) {
// Mengatur jenis dan nilai data yang disetel dengan method dataTransfer.setData()
event.dataTransfer.setData("Text", event.target.id);
// Menyampaikan beberapa teks saat elemen p mulai digeser
document.getElementById("demo").innerHTML = "Mulai geser 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";
});
// Menyampaikan beberapa teks dan mengatur kecerahan setelah elemen p digeser
document.addEventListener("dragend", function(event) {
document.getElementById("demo").innerHTML = "Selesai geser elemen p.";
event.target.style.opacity = "1";
});
/* ----------------- Peristiwa yang diaktifkan di target penempatan ----------------- */
// Saat p elemen yang dapat diangkat memasuki droptarget, ubah gaya bingkai DIV
document.addEventListener("dragenter", function(event) {
if ( event.target.className == "droptarget" ) {
event.target.style.border = "3px dotted red";
}
});
// Secara baku, data/elemen tidak dapat ditempatkan di dalam elemen lain. Untuk memungkinkan penempatan, kita harus mencegah penanganan baku elemen
document.addEventListener("dragover", function(event) {
event.preventDefault();
});
// Saat p elemen yang dapat diangkat meninggalkan droptarget, atur ulang gaya bingkai DIV
document.addEventListener("dragleave", function(event) {
if ( event.target.className == "droptarget" ) {
event.target.style.border = "";
}
});
/* Pada saat jatuh - mencegah penanganan baku browser untuk data (dengan membuka link baku saat menempatkan) */
Atur ulang warna teks dan garis bingkai DIV
Ambil data yang diangkat menggunakan metode dataTransfer.getData()
Data yang diangkat adalah id elemen yang diangkat ("drag1")
Tambahkan elemen yang dapat diangkat ke dalam 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>
