ondragend-tapahtuma

DOM-tapahtumat DragEvent

Määritelmä ja käyttö

Kun käyttäjä on valmis vetämään elementtiä tai tekstin valintaan, tapahtuu ondragend-tapahtuma.

Vedä ja pudota on erittäin yleinen ominaisuus HTML5:ssä. Se on, kun vetäät objektin ja vedät sen eri paikkaan. Lue lisää tästä: 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ä ole tarpeen käyttää draggable-ominaisuutta.

Vedetä ja pudottaa -toiminnassa käytetään monia tapahtumia eri vaiheissa, ja ne voivat tapahtua:

Vedetä ja pudottaa -tavoissa käytetyt tapahtumat:

  • ondragstart - Kun käyttäjä alkaa vetää elementtiä, se tapahtuu
  • ondrag - Kun elementtiä vedetään, se tapahtuu
  • ondragend - Kun käyttäjä on valmis vetämään elementtiä, se tapahtuu

Paikassa käytetyt tapahtumat:

  • ondragenter - Kun vedetty elementti astuu paikkaan, se tapahtuu
  • ondragover - Kun vedetty elementti on paikalla, se tapahtuu
  • ondragleave - Kun vedetty elementti irrotetaan paikasta, se tapahtuu
  • ondrop - Kun vedetty elementti asetetaan paikkaan, se tapahtuu

Esimerkki

Kun käyttäjä on valmis vetämään <p> -elementtiä, suoritetaan JavaScript：

<p draggable="true" ondragend="myFunction(event)">Vie minut!</p>

Kokeile itse

Sivun alaosassa on lisää TIY-esimerkkejä.

Syntaksi

HTML:ssä：

<elementti ondragend="myScript">

Kokeile itse

JavaScriptissa：

objekti.ondragend = function(){myScript};

Kokeile itse

JavaScriptissa käytetään addEventListener() menetelmää：

objekti.addEventListener("dragend", myScript);

Kokeile itse

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

Tekninen yksityiskohta

Puhkeaa: Tuettu
Peruutettavissa: Ei tuettu
Tapahtumatyypit: DragEvent
Tuetut HTML-merkit: Kaikki HTML-elementit
DOM-versio: Tason 3 tapahtumat

Selaimen tuki

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

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

Lisää esimerkkejä

Kaikkien mahdollisten vedä ja pudota tapahtumien esittely:

<p draggable="true" id="dragtarget">Vetä minua!</p>
<div class="droptarget">Pudota täällä!</div>
<script>
/* ----------------- Vedäjän kohteella 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 jotain tekstiä
  document.getElementById("demo").innerHTML = "Aloitetaan vetämään p-elementtiä.";
  // Muuta vetävän elementin läpinäkyvyys
  event.target.style.opacity = "0.4";
});
// Kun vetää 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 jotain 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 käytetyt tapahtumat ----------------- */
// Kun vedettävä p-elementti menee 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/elementtiä muihin elementteihin. Salliaksemme asettamisen, meidän on estettävä elementin oletusarvoinen käsittely
document.addEventListener("dragover", function(event) {
  event.preventDefault();
});
// Kun vedettävä p-elementti poistuu droptargetista, nollaa DIV:n reunaväri
document.addEventListener("dragleave", function(event) {
  if ( event.target.className == "droptarget" ) {
    event.target.style.border = "";
  }
});
/* On pudotus - estä selaimen oletusarvoinen käsittely tietoja (oletusasennossa avataan linkkinä) */
Nollaa ulostulotekstin ja DIV:n reunaväri
Hanki vedetään data dataTransfer.getData() metodilla
Vedetään data on vedetyn elementin id ("drag1")
Liitä vedetty elementti asettamis-elementtiin
*/
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 opetus: HTML5 vetäminen ja pudottaminen

HTML viittausoppikirja: HTML draggable ominaisuus

DOM-tapahtumat DragEvent