ondrag-tapahtuma

DOM-tapahtumat DragEvent

Määrittely ja käyttö

ondrag-tapahtuma tapahtuu, kun elementti tai tekstivalinta vedetään.

Vedä ja pudota on erittäin yleinen toiminto HTML5:ssä. Tämä tarkoittaa sitä, että kun "ottaa" objektin ja vetää sitä eri paikoille. Jos haluat oppia lisää, lue 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ä tarvita draggable-ominaisuutta.

Erilaisten vetämis- ja pudottamisvaiheiden aikana käytetään monia tapahtumia, ja niitä voi tapahtua:

Vedettävissä olevissa tavoitteissa (lähtöelementissä) tapahtumat：

  • ondragstart - Kun käyttäjä alkaa vedetä elementtiä, tapahtuma tapahtuu
  • ondrag - Kun elementti vedetään, tapahtuma tapahtuu
  • ondragend - Kun käyttäjä päättää vedetyn elementin, tapahtuma tapahtuu

Paikoilleen asetettujen tavoitteiden (paikkatavoitteiden) tapahtumat：

  • ondragenter - Kun vedetty elementti astuu paikoilleen, tapahtuma tapahtuu
  • ondragover - Kun vedetty elementti on paikoilleen, tapahtuma tapahtuu
  • ondragleave - Kun vedetty elementti irrotetaan paikoilleen, tapahtuma tapahtuu
  • ondrop - Kun vedetty elementti asetetaan paikoilleen, tapahtuma tapahtuu

Huomautus：Kun vedetään elementtiä, ondrag-tapahtuma käynnistyy joka 350 millisekunnin välein.

Esimerkki

Suoritetaan JavaScript, kun <p> -elementtiä vedetään:

<p draggable="true" ondrag="myFunction(event)">Tuo minut!</p>

Kokeile itse

Sivun alhaalla on lisää TIY-esimerkkejä.

Syntaksi

HTML:ssä：

<element ondrag="myScript">

Kokeile itse

JavaScriptissa：

object.ondrag = function(){myScript};

Kokeile itse

JavaScriptissa käytetään addEventListener() -metodia：

object.addEventListener("drag", myScript);

Kokeile itse

Huomautus：Internet Explorer 8 tai aikaisemmat versiot eivät tue addEventListener() metodi。

Tekninen yksityiskohta

Puhkeaa: Tuki
Peruutettavissa: Tuki
Tapahtumatyypit: DragEvent
Tuetut HTML-elementit: Kaikki HTML-elementit
DOM versio: Taso 3 tapahtumat

Selaimen tuki

Taulukon numerot osoittavat ensimmäisen selaimen version, joka tukee tapahtumaa täysin.

Tapahtuma Chrome IE Firefox Safari Opera
ondrag 4.0 9.0 3.5 6.0 12.0

Lisää esimerkkejä

Kaikkien mahdollisten vedonlyöntitapahtumien esimerkki:

<p draggable="true" id="dragtarget">Vedä minut!</p>
<div class="droptarget">Laske täällä!</div>
<script>
/* ----------------- Vedon kohteella tapahtuvat tapahtumat ----------------- */
document.addEventListener("dragstart", function(event) {
  // dataTransfer.setData() metodi asettaa vedetyn datan tyyppin ja arvon
  event.dataTransfer.setData("Text", event.target.id);
  // Aloitettaessa vetää p-elementtiä näytä tekstejä
  document.getElementById("demo").innerHTML = "Aloitetaan vetämään p-elementtiä.";
  // Muuta vetävissä olevan elementin läpinäkyvyyttä
  event.target.style.opacity = "0.4";
});
// Vaihda vetämällä olevan p-elementin näytettävän tekstin väri
document.addEventListener("drag", function(event) {
  document.getElementById("demo").style.color = "red";
});
// Valmis vetämään p-elementtiä jälkeen näytä 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 tapahtuvat tapahtumat ----------------- */
// Kun siirrettä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 sijoittaa dataa tai elementtiä muihin elementteihin. Salli sijoittaminen estämällä elementin oletusarvoinen käsittely
document.addEventListener("dragover", function(event) {
  event.preventDefault();
});
// Kun siirrettä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 linkkinä avattuna) */
Nollaa tulostustekstin ja DIV:n reunan väri
Hanki vedetään data dataTransfer.getData() -menetelmällä
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>

Kokeile itse

Liittyvät sivut

HTML ohje:HTML5:n vetäminen ja pudottaminen

HTML-referenssikirja:HTML:n draggable-ominaisuus

DOM-tapahtumat DragEvent