Peristiwa ondragstart
Definisi dan penggunaan
Event ondragstart terjadi saat pengguna mulai menyeret elemen atau pilihan teks.
Seret dan lepas adalah fitur yang sangat umum dalam HTML5. Ini adalah saat Anda "menangkap" objek dan menggesernya ke posisi yang berbeda. Untuk mengetahui lebih lanjut, baca referensi tentang Drag and Drop HTML5yang disediakan.
Catatan:Untuk membuat elemen dapat diseret, gunakan tutorial HTML global Properti draggable HTML5。
Petunjuk:Secara baku, tautan dan gambar dapat diseret, tanpa properti draggable.
Dalam berbagai tahapan operasi seret dan lepas, banyak event yang digunakan dan mungkin terjadi:
Event yang diaktifkan di target serupaan (elemen sumber):
- ondragstart - Terjadi saat pengguna mulai menyeret elemen.
- ondrag - Terjadi saat elemen diseret.
- ondragend - Terjadi saat pengguna menyelesaikan menyeret elemen.
Event yang diaktifkan di target penempatan:
- ondragenter - Terjadi saat elemen yang diseret memasuki target penempatan.
- ondragover - Terjadi saat elemen yang diseret berada di atas target penempatan.
- ondragleave - Terjadi saat elemen yang diseret meninggalkan target penempatan.
- ondrop - Terjadi saat elemen yang diseret ditempatkan di target penempatan.
Contoh
JavaScript dijalankan saat pengguna mulai menyeret elemen <p>:
<p draggable="true" ondragstart="myFunction(event)">Seret Saya!</p>
Ada banyak contoh TIY di bawah halaman.
Sintaksis
Pada HTML:
<element ondragstart="myScript">
Pada JavaScript:
object.ondragstart = function(){myScript};
Pada JavaScript, gunakan metode addEventListener():
object.addEventListener("dragstart", myScript);
Catatan:Internet Explorer 8 atau versi yang lebih awal tidak mendukung method addEventListener()。
Detil teknis
| Bubbling： | Didukung |
|---|---|
| Dapat dibatalkan： | Didukung |
| Tipe event： | DragEvent |
| Tag HTML yang didukung： | Semua elemen HTML |
| Versi DOM： | Level 3 Events |
Dukungan Browser
Angka di tabel menunjukkan versi browser pertama yang mendukung event ini.
| Event | Chrome | IE | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| ondragstart | 4.0 | 9.0 | 3.5 | 6.0 | 12.0 |
Beberapa contoh lain
Pertunjukan demo untuk semua event geser dan lepas yang mungkin:
<p draggable="true" id="dragtarget">Gergi saya!</p>
<div class="droptarget">Jatuhkan disini!</div>
<script>
/* ----------------- Event yang diaktifkan di target geser ----------------- */
document.addEventListener("dragstart", function(event) {
// Mengatur jenis dan nilai data yang disetel melalui method dataTransfer.setData()
event.dataTransfer.setData("Text", event.target.id);
// Menampilkan 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";
});
// Menampilkan 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";
});
/* ----------------- Event yang dijalankan di tempat penempatan ----------------- */
// Saat p elemen yang dapat diangkut 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 dan elemen tidak dapat ditempatkan di dalam elemen lain. Untuk memungkinkan penempatan, kita harus menghentikan penggunaan bawaan elemen
document.addEventListener("dragover", function(event) {
event.preventDefault();
});
// Saat p elemen yang dapat diangkut keluar droptarget, atur ulang gaya bingkai DIV
document.addEventListener("dragleave", function(event) {
if ( event.target.className == "droptarget" ) {
event.target.style.border = "";
}
});
/* Pada saat pindah - menghentikan penggunaan bawaan browser untuk data (dalam hal penempatan bawaan membuka sebagai tautan)
Atur ulang warna teks dan garis bingkai DIV
Ambil data yang diangkut menggunakan metode dataTransfer.getData()
Data yang diangkut adalah id elemen yang diangkut ("drag1")
Tambahkan elemen yang diangkut ke dalam 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>
