ondragleave -tapahtuma
Määrittely ja käyttö
ondragleave-tapahtuma tapahtuu, kun siirrettävä elementti tai tekstivalinta poistuu voimakkaasta asettamisesta
ondragenter- ja ondragleave-tapahtumat voivat auttaa käyttäjiä ymmärtämään, että jokin siirrettävä elementti on juuri menossa sisään tai ulos asettamisesta. Esimerkiksi voit asettaa taustavärin, kun elementti menee sisään asettamisesta, ja poistaa värin, kun elementti poistuu asettamisesta.
Vedä ja pudota on HTML5:ssä erittäin yleinen toiminto. Tämä tarkoittaa sitä, että kun vetät objektia ja vedät sen eri paikoille. Lisätietoja oppimiseen, lue lisää meidän tietokannastamme HTML5 -raahausHTML-opetusohjelmaa.
Huomautus：Jos haluat tehdä elementin siirrettäväksi, käytä globaalia HTML5 draggable-ominaisuus。
Vinkki：Oletuksena linkit ja kuvat ovat siirrettävissä, eikä tarvita draggable-ominaisuutta.
Erilaisissa vetämisen ja pudottamisen vaiheissa käytetään monia tapahtumia, ja ne voivat tapahtua：
Siirrettävissä olevassa kohdessa (lähtöelementissä) tapahtuvat tapahtumat：
- ondragstart - Kun käyttäjä alkaa vetää elementtiä
- ondrag - Kun elementti siirretään
- ondragend - Kun käyttäjä suorittaa siirron elementin kanssa
Asettamispaikalla tapahtuvat tapahtumat：
- ondragenter - Kun siirrettävä elementti päästään asettamispaikkaan
- ondragover - Kun siirrettävä elementti on asettamispaikalla
- ondragleave - Kun siirrettävä elementti poistuu asettamisesta
- ondrop - Kun siirrettävä elementti asetetaan asettamispaikkaan
Esimerkki
Suoritetaan JavaScript, kun siirrettävä elementti siirtyy pois asettamisesta:
<div ondragleave="myFunction(event)"></div>
Sivun alhaalla on lisää TIY-esimerkkejä.
Syntaksi
HTML:ssä：
<elementti ondragleave="myScript">
JavaScriptissa：
objekti.ondragleave = function(){myScript};
JavaScriptissa käytetään addEventListener() -metodia：
objekti.addEventListener("dragleave", myScript);
Huomautus：Internet Explorer 8 tai aikaisemmat versiot eivät tue addEventListener() 方法。
Tekninen yksityiskohta
| Päihteessä: | Tuettu |
|---|---|
| Peruutettavissa: | Ei tuettu |
| Tapahtumatyypit: | DragEvent |
| Tuetut HTML-merkit: | Kaikki HTML-elementit |
| DOM versio: | Taso 3 tapahtumat |
Selaimen tuki
Taulukossa olevat numerot osoittavat ensimmäisen selaimen version, joka tukee tapahtumaa täysin.
| Tapahtuma | Chrome | IE | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| ondragleave | 4.0 | 9.0 | 3.5 | 6.0 | 12.0 |
Esimerkki
Kaikkien mahdollisten vetämisen ja pudottamisen tapahtumien esittely:
<p draggable="true" id="dragtarget">Vetä minut!</p>
<div class="droptarget">Laske täällä!</div>
<script>
/* ----------------- Vetämisen kohteessa tapahtuvat tapahtumat ----------------- */
document.addEventListener("dragstart", function(event) {
// dataTransfer.setData()-metodi asettaa vedetyn datan tyyppin ja arvon
event.dataTransfer.setData("Text", event.target.id);
// Kun aloitetaan vetämään p-elementtiä, tulosta joitakin tekstejä
document.getElementById("demo").innerHTML = "Aloitetaan vetämään p-elementtiä.";
// Muuta vedettävän elementin läpinäkyvyys
event.target.style.opacity = "0.4";
});
// Kun vetät p-elementtiä, muuta tulostustekstin väri
document.addEventListener("drag", function(event) {
document.getElementById("demo").style.color = "red";
});
// Kun p-elementin vetäminen on valmis, tulosta joitakin tekstejä ja palauta läpinäkyvyys
document.addEventListener("dragend", function(event) {
document.getElementById("demo").innerHTML = "Valmis vetämään p-elementtiä.";
event.target.style.opacity = "1";
});
/* ----------------- Asetuskohteessa tapahtuvat tapahtumat ----------------- */
// Kun vetävä p-elementti tulee droptargetiin, muuta DIV:n reunavyöhykkeen tyyli
document.addEventListener("dragenter", function(event) {
if ( event.target.className == "droptarget" ) {
event.target.style.border = "3px dotted red";
}
});
// Oletusarvoisesti ei voi sijoittaa tietoja/elementtejä muihin elementteihin. Salliaksemme sijoittamisen, meidän on estettävä elementin oletuskäsittely
document.addEventListener("dragover", function(event) {
event.preventDefault();
});
// Kun vetävä p-elementti lähtee droptargetista, nollaa DIV:n reunavyöhykkeen tyyli
document.addEventListener("dragleave", function(event) {
if ( event.target.className == "droptarget" ) {
event.target.style.border = "";
}
});
/* Kun pudotetaan - estä selaimen oletusarvoinen käsittely tietoja (oletusasennossa linkkinä avattuna) */
Nollaa ulostulotekstin ja DIV:n reunaväri
Hanki vedetyn datan dataTransfer.getData() metodilla
Vedettävä data on vedetyn elementin id ("drag1")
Liitä vedettävä elementti asettamiselementtiin
*/
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>
