ondragstart-tapahtuma
Määrittely ja käyttö
ondragstart-tapahtuma tapahtuu, kun käyttäjä alkaa vetää elementtiä tai tekstivalinnan.
Vedä ja aseta on erittäin yleinen ominaisuus HTML5:ssä. Tämä tarkoittaa, että kun vetät objektia 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ä HTML5 draggable-ominaisuus.
Vinkki：Oletuksena linkit ja kuvat ovat vedettävissä, eikä draggable-ominaisuutta tarvita.
Erilaisten vetämis- ja asettamisvaiheiden aikana käytetään monia tapahtumia, ja ne voivat tapahtua：
Vedettävissä olevilla kohdilla käytävät tapahtumat：
- ondragstart - Kun käyttäjä alkaa vetää elementtiä, tapahtuu
- ondrag - Kun elementti vedetään, tapahtuu
- ondragend - Kun käyttäjä päättää vetää elementin, tapahtuu
Asettamistavoitteella käytävät tapahtumat：
- ondragenter - Kun vedetty elementti astuu asettamistavoitteeseen, tapahtuu
- ondragover - Kun vedetty elementti on asettamistavoitteella, tapahtuu
- ondragleave - Kun vedetty elementti irrotetaan asettamistavoitteesta, tapahtuu
- ondrop - Kun vedetty elementti asetetaan asettamistavoitteelle, tapahtuu
Esimerkki
Kun käyttäjä alkaa vetää <p> -elementtiä, suoritetaan JavaScript：
<p draggable="true" ondragstart="myFunction(event)">Tuo minut!</p>
Sivun alaosassa on lisää TIY-esimerkkejä.
Syntaksi
HTML:ssä：
<elementti ondragstart="myScript">
JavaScriptissa：
objekti.ondragstart = function(){myScript};
JavaScriptissa käytetään addEventListener() -metodia：
objekti.addEventListener("dragstart", myScript);
Huomautus：Internet Explorer 8 tai aikaisemmat versiot eivät tue addEventListener() metodi.
Tekninen yksityiskohta
| Päihtymisessä: | Tukemaan |
|---|---|
| Peruutettavissa: | Tukemaan |
| 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 |
|---|---|---|---|---|---|
| ondragstart | 4.0 | 9.0 | 3.5 | 6.0 | 12.0 |
Lisää esimerkkejä
Kaikkien mahdollisten vedä ja pudota tapahtumien esittely:
<p draggable="true" id="dragtarget">Vedä minut!</p>
<div class="droptarget">Lasketa tähän!</div>
<script>
/* ----------------- Vedäntä kohdessa tapahtuvat tapahtumat ----------------- */
document.addEventListener("dragstart", function(event) {
// dataTransfer.setData()-metodi asettaa vedetyn tiedon 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 tulostettavan 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";
});
/* ----------------- Asetustavoilla käsiteltävät tapahtumat ----------------- */
// Kun vetävä p-elementti tulee 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/elementtiä muihin elementteihin. Jotta voimme mahdollistaa asettamisen, 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 reunan tyyli
document.addEventListener("dragleave", function(event) {
if ( event.target.className == "droptarget" ) {
event.target.style.border = "";
}
});
/* On pudotus - estä selaimen oletusarvoinen käsittely tietoja (oletusasetuksena linkkinä avattuna)*/
Nollaa ulostulotekstin ja DIV:n reunan värin
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>
