acara ondragleave
contoh
Dijalankan ketika elemen draggable dari target penurunan JavaScript:
Coba »
Bagian bawah artikel ini berisi lebih banyak contoh.
Definisi dan Penggunaan
Acara ondragleave ketika elemen diseret atau teks yang dipilih dari target penurunan eksekusi pemicu.
ondragenter dan acara ondragleave dapat membantu pengguna lebih memahami unsur-unsur draggable memasuki dan meninggalkan proses zona degradasi. Anda dapat mengatur warna latar belakang yang berbeda ketika elemen diseret masuk dan meninggalkan zona degradasi.
HTML5 Drag dan Drop adalah fitur yang sangat umum. Untuk informasi lebih lanjut, lihat HTML tutorial HTML5 drag dan drop .
Catatan: Untuk membuat elemen draggable, Anda perlu menggunakan HTML5 draggable dengan properti.
Tip: The Link default dan gambar yang diseret, tidak ada atribut draggable.
Drag dan drop proses akan memicu peristiwa berikut:
- Memicu event (sumber elemen) pada Drag Target:
- ondragstart - dipicu ketika pengguna mulai menyeret elemen
- ondrag - elemen diseret pemicu
- ondragend - dipicu setelah pengguna menyelesaikan elemen hambatan
- Melepaskan peristiwa sasaran pemicu:
- OnDragEnter - Acara ini dipecat ketika mouse diseret objek ke berbagai wadah
- OnDragOver - Acara ini dipicu ketika objek diseret tarik objek kontainer di kisaran lain
- ondragleave - Acara ini dipecat ketika mouse diseret dari objek dalam jangkauan wadah
- onDrop - di menyeret sebuah, lepaskan tombol mouse ketika Anda memicu acara ini
Dukungan Browser
Angka dalam tabel tersebut merupakan browser pertama yang mendukung versi kejadian.
peristiwa | |||||
---|---|---|---|---|---|
ondragleave | 4.0 | 9.0 | 3.5 | 6.0 | 12.0 |
tatabahasa
Di HTML:
Dalam JavaScript:
JavaScript, menggunakan () metode addEventListener:
Catatan: Internet Explorer 8 dan versi sebelumnya dari IE tidak mendukung () addEventListener metode.
rincian teknis
Apakah akan mendukung gelembung: | ya |
---|---|
Hal ini dapat dibatalkan: | tidak |
Jenis acara: | DragEvent |
tag HTML didukung: | Semua elemen HTML |
contoh yang lebih
contoh
Contoh berikut menunjukkan semua drag dan drop acara:
document.addEventListener ( "dragstart", function (event) {
//dataTransfer.setData () metode untuk mengatur jenis data dan data yang seret
event.dataTransfer.setData ( "Text", event.target.id);
// Output beberapa teks sambil menyeret p elemen
. Document.getElementById ( "demo") innerHTML = "mulai menyeret p elemen.";
// Ubah transparansi elemen hambatan
event.target.style.opacity = "0.4";
});
// P elemen tarik pada saat yang sama, mengubah warna teks output
document.addEventListener ( "drag", function (event) {
. Document.getElementById ( "demo") style.color = "red";
});
// Output End p elemen ketika menyeret beberapa elemen teks dan reset transparansi
document.addEventListener ( "dragend", function (event) {
. Document.getElementById ( "demo") innerHTML = "lengkap p tarik elemen";
event.target.style.opacity = "1";
});
/ * Setelah selesai hambatan memicu * /
// Lengkapi elemen tarik ketika p masukkan DropTarget, gaya perbatasan mengubah div
document.addEventListener ( "dragenter", function (event) {
jika (event.target.className == "DropTarget") {
event.target.style.border = "3px dotted merah";
}
});
// Secara default, data / unsur tidak dapat menyeret dan menjatuhkan elemen lainnya. Untuk penurunan Kita harus mencegah elemen pengolahan standar
document.addEventListener ( "dragover", function (event) {
event.preventDefault ();
});
// Ketika drag dan drop elemen p meninggalkan DropTarget, ulang div style border
document.addEventListener ( "dragleave", function (event) {
jika (event.target.className == "DropTarget") {
event.target.style.border = "";
}
});
/ * Untuk drop, mencegah browser pengolahan data default (di link penurunan diaktifkan secara default)
Ulang output warna border dan warna teks dari DIV
Menggunakan data dataTransfer.getData () metode untuk mendapatkan turun
Mop elemen data id ( "drag1")
elemen tambahan untuk drop elemen tarik * /
document.addEventListener ( "drop", function (event) {
event.preventDefault ();
jika (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));
}
});
Coba »
Pages terkait
HTML Tutorial: Drag HTML5 dan Drop
Referensi HTML: HTML atribut draggable dengan
benda acara