Peristiwa ondrop
Definisi dan penggunaan
Ketika elemen yang dapat diseret atau pilihan teks ditempatkan di target penempatan yang berlaku, peristiwa ondrop akan terjadi.
Seret dan lepas adalah fungsi yang sangat umum dalam HTML5. Itu seperti saat Anda "menangkap" objek dan mengangkatnya ke posisi yang berbeda. Untuk mengetahui lebih banyak, baca tentang Pindai HTML5pada tutorial HTML Anda.
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.
Dalam berbagai tahap operasi seret dan lepas, banyak peristiwa yang digunakan dan mungkin terjadi:
Peristiwa yang diaktifkan di target yang dapat diangkat (elemen sumber):
- ondragstart - Terjadi ketika pengguna mulai mengangkat elemen.
- ondrag - Terjadi ketika elemen diangkat.
- ondragend - Terjadi ketika pengguna menyelesaikan pengangkatan elemen.
Peristiwa yang diaktifkan di target penempatan:
- ondragenter - Terjadi ketika elemen yang diangkat memasuki target penempatan.
- ondragover - Terjadi ketika elemen yang diangkat berada di target penempatan.
- ondragleave - Terjadi ketika elemen yang diangkat meninggalkan target penempatan.
- ondrop - Terjadi ketika elemen yang diangkat ditempatkan di target penempatan.
Contoh
Melaksanakan JavaScript dalam elemen <div> yang menempatkan elemen yang dapat diangkat:
<div ondrop="myFunction(event)"></div>
Ada contoh TIY lebih banyak di bawah halaman.
Sintaksis
Dalam HTML:
<elemen ondrop="myScript">
Dalam JavaScript:
objek.ondrop = function(){myScript};
Dalam JavaScript, gunakan metode addEventListener():
objek.addEventListener("drop", myScript);
Keterangan:Internet Explorer 8 atau versi yang lebih awal tidak mendukung metode addEventListener()。
Detil teknikal
| Bubbling： | Didukung |
|---|---|
| Boleh dicancel： | Didukung |
| Jenis peristiwa： | DragEvent |
| Tanda HTML yang didukung： | Semua elemen HTML |
| Versi DOM： | Peristiwa Level 3 |
Dukungan pereka web
Angka di dalam tabel menunjukkan versi pereka web pertama yang mendukung peristiwa ini penuh.
| Peristiwa | Chrome | IE | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| ondrop | 4.0 | 9.0 | 3.5 | 6.0 | 12.0 |
Contoh tambahan
Pertunjukan untuk semua peristiwa seret dan lepas yang mungkin:
<p draggable="true" id="dragtarget">Seret saya!</p>
<div class="droptarget">Seret di sini!</div>
<script>
/* ----------------- Peristiwa yang diaktifkan di sasaran seret dan lepas ----------------- */
document.addEventListener("dragstart", function(event) {
// Methode dataTransfer.setData() menetapkan jenis dan nilai data yang diseret
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 menyeret elemen p
document.addEventListener("dragend", function(event) {
document.getElementById("demo").innerHTML = "Selesai menyeret elemen p.";
event.target.style.opacity = "1";
});
/* ----------------- Peristiwa yang diaktifkan di target penempatan ----------------- */
// Saat p elemen yang dapat dipindahkan memasuki droptarget, ubah gaya bingkai DIV
document.addEventListener("dragenter", function(event) {
if ( event.target.className == "droptarget" ) {
event.target.style.border = "3px dotted red";
}
});
// Secara bawaan, data tidak dapat ditempatkan di dalam elemen lain. Untuk memungkinkan penempatan, kita harus mencegah pengelolaan bawaan elemen
document.addEventListener("dragover", function(event) {
event.preventDefault();
});
// Saat p elemen yang dapat dipindahkan meninggalkan droptarget, tetapkan gaya bingkai DIV kembali
document.addEventListener("dragleave", function(event) {
if ( event.target.className == "droptarget" ) {
event.target.style.border = "";
}
});
/* Pada saat jatuh - mencegah pengelolaan bawaan browser untuk data (dengan mengambil tindakan bawaan seperti membuka link) */
Tetapkan warna teks dan warna garis bingkai DIV kembali
Dapatkan data yang dipindahkan menggunakan metode dataTransfer.getData()
Data yang dipindahkan adalah id elemen yang dipindahkan ("drag1")
Menambahkan elemen yang dipindahkan ke elemen tujuannya
*/
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>
