ondrop-tapahtuma
Määrittely ja käyttö
Kun liukuvan elementin tai tekstivalinnan asetetaan kelvolliseen asettamistavoitteeseen, tapahtuu ondrop-tapahtuma.
Liikuta ja pudota on erittäin yleinen ominaisuus HTML5:ssä. Tämä tarkoittaa, että kun “naputat” objektia ja vedät sen eri paikkoihin. Lue lisää tietoja, lue meidän tietomme HTML5:n vetäminen ja pudottaminenHTML-opetusohjelmaa.
Huomautus：Jos haluat tehdä elementin liukuvaksi, käytä globaalia HTML5 draggable-ominaisuus.
Vinkki：Oletuksena linkit ja kuvat ovat liukuvia, eikä tarvita draggable-ominaisuutta.
Erilaisten vetämis- ja pudottamistapahtumien vaiheissa käytetään monia tapahtumia, ja voi tapahtua：
Lähetetään tapahtumia liukuvissa kohteissa（lähtöelementissä）：
- ondragstart - Kun käyttäjä aloittaa elementin liikkumisen, tapahtuu
- ondrag - Kun elementti liikutetaan, tapahtuu
- ondragend - Kun käyttäjä päättää liikkuvan elementin, tapahtuu
Asettamistavoitteessa laukeavat tapahtumat：
- ondragenter - Kun liukuva elementti astuu asettamistavoitteeseen, tapahtuu
- ondragover - Kun liukuva elementti on asettamistavoitteessa, tapahtuu
- ondragleave - Kun liukuva elementti poistuu asettamistavoitteesta, tapahtuu
- ondrop - Kun liukuva elementti asetetaan asettamistavoitteeseen, tapahtuu
Esimerkki
Suoritetaan JavaScript <div>-elementissä, kun siellä asetetaan liukuvia elementtejä：
<div ondrop="myFunction(event)"></div>
Sivun alaosassa on lisää TIY-esimerkkejä.
Syntaksi
HTML:ssä：
<elementti ondrop="myScript">
JavaScriptissa：
objekti.ondrop = function(){myScript};
JavaScriptissa käytetään addEventListener() -metodia：
objekti.addEventListener("drop", myScript);
Huomautus：Internet Explorer 8 tai aikaisemmat versiot eivät tue addEventListener() metodi.
Tekninen tarkistus
| Puhkeava: | 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 |
|---|---|---|---|---|---|
| ondrop | 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">Vetä minua!</p>
<div class="droptarget">Pudota 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 vetävän elementin läpinäkyvyyttä
event.target.style.opacity = "0.4";
});
// Kun vetät p-elementtiä, muuta tulostetun tekstin 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";
});
/* ----------------- Pudotuskohteessa käsitellyt tapahtumat ----------------- */
// Kun vetävä p-elementti pääsee droptargetiin, muuta DIV:n reunan tyyli
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 voimme sallia 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 reunan tyyli
document.addEventListener("dragleave", function(event) {
if ( event.target.className == "droptarget" ) {
event.target.style.border = "";
}
});
/* Kun pudotetaan - estä selaimen oletusarvoinen käsittely tietoja (oletusarvoisesti avataan linkkinä) */
Nollaa tulostetun tekstin ja DIV:n reunan väri
Hanki vedetty data dataTransfer.getData() metodilla
Vedetään data on vedetyn elementin id ("drag1")
Liitä vedetty elementti asetteluun
*/
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>
