ondragover-tapahtuma
Määritelmä ja käyttö
Kun vedettävä elementti tai tekstivalinta vedetään voimakkaaseen asettamaan kohteeseen, tapahtuu ondragover-tapahtuma.
Oletuksena ei voida poistaa tietoja/elementtejä toisista elementeistä. Jotta sallitaan asettaminen, meidän täytyy estää elementin oletusarvoinen käsittely. Tämä tehdään kutsumalla ondragover-tapahtuman event.preventDefault() -metodia.
Vedä ja pudota on erittäin yleinen ominaisuus HTML5:ssä. Tämä tarkoittaa, että kun vedät objektin ja vedät sen eri sijoihin. 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ä HTML5 draggable-ominaisuus。
Vinkki：Oletuksena linkit ja kuvat ovat vedettävissä, eikä draggable-ominaisuutta tarvita.
Erilaisten vedä ja pudota -toimintojen vaiheissa käytetään monia tapahtumia, ja niitä voi tapahtua：
Käytettävissä olevissa vedettävissä kohteissa (lähtöelementissä) käynnistyvät tapahtumat：
- ondragstart - Kun käyttäjä alkaa vedetä elementtiä, tapahtuu
- ondrag - Kun elementti vedetään, tapahtuu
- ondragend - Kun käyttäjä päättää vedetyn elementin, tapahtuu
Asetettaessa kohteessa käynnistyvät tapahtumat：
- ondragenter - Kun vedetty elementti astuu asettamaan kohteeseen
- ondragover - Kun vedetty elementti on asettamaan kohteessa
- ondragleave - Kun vedetty elementti irrotetaan asettamaan kohteesta, tapahtuu
- ondrop - Kun vedetty elementti asetetaan asettamaan kohteeksi, tapahtuu
Huomautus：Kun elementtiä vedetään, ondragover-tapahtuma käynnistyy joka 350 millisekunnin välein.
Esimerkki
Suoritetaan JavaScript, kun elementti vedetään asettamaan kohteeksi：
<div ondragover="myFunction(event)"></div>
Sivun alaosassa on lisää TIY-esimerkkejä.
Syntaksi
HTML:ssä：
<elementti ondragover="myScript">
JavaScriptissa：
objekti.ondragover = function(){myScript};
JavaScriptissa käytetään addEventListener() -metodia：
objekti.addEventListener("dragover", myScript);
Huomautus：Internet Explorer 8 tai aikaisemmat versiot eivät tue addEventListener() metodi。
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 |
|---|---|---|---|---|---|
| ondragover | 4.0 | 9.0 | 3.5 | 6.0 | 12.0 |
Lisää esimerkkejä
Kaikkien mahdollisten vetämisen ja pudottamisen tapahtumien esittely:
<p draggable="true" id="dragtarget">Vetä minut!</p>
<div class="droptarget">Lasketa tähän!</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 tekstiä
document.getElementById("demo").innerHTML = "Aloitetaan vetämään p-elementtiä.";
// Muuta vetäyksen 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";
});
/* ----------------- Asetuskohteessa tapahtuvat tapahtumat ----------------- */
// Kun vetävä p-elementti tulee droptargetiin, muuta DIV:n reunaväri
document.addEventListener("dragenter", function(event) {
if ( event.target.className == "droptarget" ) {
event.target.style.border = "3px dotted red";
}
});
// Oletusarvoisesti ei voi asettaa dataa tai elementtiä muihin elementteihin. Jotta asettaminen on mahdollista, meidän on estettävä elementin oletusarvoinen käsittely
document.addEventListener("dragover", function(event) {
event.preventDefault();
});
// Kun vetävä p-elementti poistuu droptargetista, nollaa DIV:n reunaväri
document.addEventListener("dragleave", function(event) {
if ( event.target.className == "droptarget" ) {
event.target.style.border = "";
}
});
/* Kun pudotetaan - estä selaimen oletusarvoinen käsittely tietoja (oletusarvoisesti linkkinä avattuna) */
Nollaa ulostulotekstin ja DIV:n reunaväri
Hanki vedetyn datan dataTransfer.getData() metodilla
Vedetään data on vedetyn elementin id ("drag1")
Liitä vedetty 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>
