Acara ondragleave

Contoh

Mengeksekusi JavaScript ketika elemen draggable dipindahkan dari target penurunan:

Lebih "Try it Yourself" contoh di bawah ini.

Definisi dan Penggunaan

Acara ondragleave terjadi ketika elemen draggable atau seleksi teks meninggalkan target penurunan valid.

The ondragenter dan acara ondragleave dapat membantu pengguna untuk memahami bahwa elemen draggable akan memasuki atau meninggalkan target drop. Hal ini dapat dilakukan dengan, misalnya, pengaturan warna latar belakang ketika elemen draggable memasuki target drop, dan menghapus warna ketika elemen tersebut akan dipindahkan dari target drop.

Drag dan drop adalah fitur yang sangat umum di HTML5. Ini adalah ketika Anda "grab" sebuah objek dan tarik ke lokasi yang berbeda. Untuk informasi lebih lanjut, lihat Tutorial HTML kami pada HTML5 Drag dan Drop .

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

Tip: Link dan gambar yang draggable secara default, dan tidak perlu draggable atribut.

Ada banyak peristiwa yang digunakan, dan dapat terjadi, pada tahap yang berbeda dari drag dan drop operasi:

Acara menembaki target draggable (the source element) :
- ondragstart - terjadi ketika pengguna mulai menyeret elemen
- ondrag - terjadi ketika elemen diseret
- ondragend - terjadi ketika pengguna telah selesai menyeret elemen

Acara menembaki target penurunan:
- ondragenter - terjadi ketika elemen diseret masuk target penurunan
- ondragover - terjadi ketika elemen diseret lebih target penurunan
- ondragleave - terjadi ketika elemen diseret meninggalkan target penurunan
- ondrop - terjadi ketika elemen diseret dijatuhkan pada target penurunan

Dukungan Browser

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

Peristiwa
ondragleave	4.0	9.0	3,5	6.0	12.0

Sintaksis

Dalam HTML:

< Cobalah sendiri "

Dalam JavaScript:

object .ondragleave=function(){ Cobalah sendiri "

Dalam JavaScript, menggunakan addEventListener() metode:

object .addEventListener("dragleave", myScript );

Cobalah sendiri "

Catatan: addEventListener() metode tidak didukung di Internet Explorer 8 dan versi sebelumnya.

Rincian teknis

Gelembung:	iya nih
dibatalkan:	Tidak
jenis acara:	DragEvent
tag HTML yang didukung:	Semua elemen HTML
DOM Versi:	Level 3 Acara

Contoh lebih

Contoh

Sebuah demonstrasi SEMUA mungkin drag dan drop peristiwa:

<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>

Cobalah sendiri "