ondragenter-tapahtuma
Määritelmä ja käyttö
Kun vedettävä elementti tai tekstivalinta siirtyy kelvolliseen asettamaan kohteeseen, tapahtuu ondragenter-tapahtuma.
ondragenter- ja ondragleave-tapahtumista, jotka voivat auttaa käyttäjiä ymmärtämään, että jokin vedettävä elementti on tulossa tai poistumassa asettamaan kohteesta. Esimerkiksi voit asettaa taustavärin, kun vedettävä elementti tulee asettamaan kohteeseen, ja poistaa värin, kun elementti poistuu kohdesta.
Vedä ja aseta on HTML5:ssä erittäin yleinen toiminto. Tämä tarkoittaa, että kun sinä "kätkeät" objektin ja vedät sen eri paikalle. Jos haluat oppia lisää, lue meidän tietomme HTML5:n vetäminen ja pudottaminenHTML-opetusohjelmaa.
Huomautus：Jos haluat tehdä elementin vedettäväksi, käytä globaalia HTML5 draggable-ominaisuus。
Vinkki：Oletuksena linkit ja kuvat ovat vedettävissä, eikä tarvita draggable-ominaisuutta.
Erilaisten vetämis- ja asettamisvaiheiden aikana käytetään monia tapahtumia, ja ne voivat tapahtua：
Vedettävissä kohdissa (lähtöelementissä) käytävät tapahtumat：
- ondragstart - Kun käyttäjä alkaa vetää elementtiä
- ondrag - Kun elementti vedetään
- ondragend - Kun käyttäjä suorittaa vedon elementin kanssa
Asetuskohteessa käytävät tapahtumat：
- ondragenter - Kun vedettävä elementti siirtyy asettamaan kohteeseen
- ondragover - Kun vedettävä elementti on asettamaan kohteessa
- ondragleave - Kun vedettävä elementti poistuu asettamaan kohteesta
- ondrop - Kun vedettävä elementti asetetaan asettamaan kohteeseen
Esimerkki
Suoritetaan JavaScript, kun vetävyyskelpoisuus-elementti siirtyy asettamaan kohteeseen：
<div ondragenter="myFunction(event)"></div>
Sivun alaosassa on lisää TIY-esimerkkejä.
Syntaksi
HTML:ssä：
<elementti ondragenter="myScript">
JavaScriptissa：
objekti.ondragenter = function(){myScript};
JavaScriptissa käytetään addEventListener() -metodia：
objekti.addEventListener("dragenter", myScript);
Huomautus：Internet Explorer 8 tai aikaisemmat versiot eivät tue addEventListener() menetelmä。
Tekninen yksityiskohta
| Päihteessä: | Tuki |
|---|---|
| Peruutettavissa: | Tuki |
| Tapahtumatyypit: | DragEvent |
| Tuetut HTML-elementit: | 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 |
|---|---|---|---|---|---|
| ondragenter | 4.0 | 9.0 | 3.5 | 6.0 | 12.0 |
Lisää esimerkkejä
Kaikkien mahdollisten vetämisen ja pudottamisen tapahtumien esimerkki:
<p draggable="true" id="dragtarget">Vedä minua!</p>
<div class="droptarget">Laske täällä!</div>
<script>
/* ----------------- DRASTA KOHDISTA TAPAHTUVAT TAPAHTUMAT ----------------- */
document.addEventListener("dragstart", function(event) {
// dataTransfer.setData()-menetelmä asettaa vedetyn datan tyyppin ja arvon
event.dataTransfer.setData("Text", event.target.id);
// Kun aloitetaan vetämään p-elementtiä, tulosta tekstiä
document.getElementById("demo").innerHTML = "Aloitetaan vetämään p-elementtiä.";
// Muuta vetäytettä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 tekstiä 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";
});
/* ----------------- Asettamispisteessä aktivoitavat tapahtumat ----------------- */
// Kun vetävä p-elementti menee 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 asettaa dataa/elementtiä muihin elementteihin. Salliaksemme asettamisen, meidän on estettävä elementin oletusarvoinen kä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ä avataan) */
Nollaa tulostetun tekstin ja DIV:n reunaväri
Hanki vedetyn datan dataTransfer.getData() metodilla
Vedetään data on vedetyn elementin id ("drag1")
Liitä vedetty elementti asettamispisteeseen
*/
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>
