ondragleave begivenhed
Definition og brug
Ondragleave-ventetiden udløses, når en trækbar element eller tekstvalg forlader et gyldigt målområde.
ondragenter og ondragleave events hjælper brugeren med at forstå, at en trækbar element er ved at komme ind eller forlade målområdet. For eksempel kan du sætte baggrundsfarve, når elementet kommer ind i målområdet, og fjerne farven, når elementet forlader målområdet.
Drag-and-drop er en meget almindelig funktion i HTML5. Det er når du "greber" et objekt og trækker det til en anden placering. For at lære mere, læs vores artikel om HTML5 træk og slipHTML-undervisning.
Bemærk:For at gøre et element trækbart skal du bruge den globale HTML5 draggable-attributten。
Tip:Som standard er links og billeder trækbare uden at kræve draggable-attributten.
Der bruges mange events i forskellige faser af træk-og-slip-operationer, og de kan ske:
Irriterende på trækbare mål (kildeelement) udløser følgende events:
- ondragstart - Sker, når brugeren starter trækningen af elementet
- ondrag - Sker, når elementet trækkes
- ondragend - Sker, når brugeren færdiggør trækningen af elementet
Irriterende på målområdet udløser følgende events:
- ondragenter - Sker, når den trukne element kommer ind i målområdet
- ondragover - Sker, når den trukne element er på målområdet
- ondragleave - Sker, når den trukne element fjernes fra målområdet
- ondrop - Sker, når den trukne element placeres på målområdet
Eksempel
Udfør JavaScript, når en trækbar element flyttes ud af målområdet:
<div ondragleave="myFunction(event)"></div>
Der er flere TIY-exempler nedenfor på siden.
Syntaks
I HTML:
<element ondragleave="myScript">
I JavaScript:
object.ondragleave = function(){myScript};
I JavaScript bruges addEventListener() metoden:
object.addEventListener("dragleave", myScript);
Bemærk:Internet Explorer 8 eller tidligere versioner understøtter ikke addEventListener() metoden。
Teknisk detalje
| Bobbel | Understøttet |
|---|---|
| Kan annulleres: | Ikke understøttet |
| Begivenhedstype: | DragEvent |
| Understøttede HTML-mærker: | Alle HTML-elementer |
| DOM version: | Level 3 Events |
Browserunderstøttelse
Tallene i tabellen angiver den første browserversion, der fuldt ud understøtter begivenheden.
| Begivenhed | Chrome | IE | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| ondragleave | 4.0 | 9.0 | 3.5 | 6.0 | 12.0 |
Eksempel
Demonstration af alle mulige drag-and-drop begivenheder:
<p draggable="true" id="dragtarget">Træk mig!</p>
<div class="droptarget">Slip her!</div>
<script>
/* ----------------- Begivenheder der udløses på trækningsmålet ----------------- */
document.addEventListener("dragstart", function(event) {
// dataTransfer.setData() metoden sætter datatypen og værdien for de trukne data
event.dataTransfer.setData("Text", event.target.id);
// Udfør nogle tekster, når p-elementet begynder at trækkes
document.getElementById("demo").innerHTML = "Begyndte at trække p-elementet.";
// Ændr gennemsigtigheden for den trækbare element
event.target.style.opacity = "0.4";
});
// Ændr farven på outputteksten, når p-elementet trækkes
document.addEventListener("drag", function(event) {
document.getElementById("demo").style.color = "red";
});
// Udfør nogle tekster og nulstil gennemsigtighed efter at have trukket p-elementet
document.addEventListener("dragend", function(event) {
document.getElementById("demo").innerHTML = "Færdig med at trække p-elementet.";
event.target.style.opacity = "1";
});
/* ----------------- Events triggered on the drop target ----------------- */
// When the draggable p element enters the droptarget, change the DIV 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 placed in other elements. To allow placement, 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 DIV border style
document.addEventListener("dragleave", function(event) {
if ( event.target.className == "droptarget" ) {
event.target.style.border = "";
}
});
/* On drop - Prevent the browser's default handling of data (default to open as link when dropped) */
Reset the output text color and the DIV border color
Use the dataTransfer.getData() method to get the dragged data
The dragged data is the id of the dragged element ("drag1")
Attach the draggable element to 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>
