HTML5-kahraaminen

Tuo CodeW3C.com:n kuva suorakulmioiden sisälle.

Vedonlyönti

Vedonlyönti (Drag ja Drop) on erittäin yleinen ominaisuus. Se tarkoittaa, että otat jotain ja vedät sen eri paikkaan.

Vedonlyönti on HTML5-standardin osa: mikä tahansa elementti on vedettäväksi.

Selaintuki

Taulukon numerot osoittavat ensimmäisen täysin tukevan selausversion vedonlyönnille.

API
Vedonlyönti 4.0 9.0 3.5 6.0 12.0

HTML vedonlyöntiesimerkki

Seuraava on yksinkertainen esimerkki vedonlyönnistä:

Esimerkki

<!DOCTYPE HTML>
<html>
<head>
<script>
function allowDrop(ev) {
    ev.preventDefault();
}
function drag(ev) {
    ev.dataTransfer.setData("text", ev.target.id);
}
function drop(ev) {
    ev.preventDefault();
    var data = ev.dataTransfer.getData("text");
    ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<img id="drag1" src="img_logo.gif" draggable="true" ondragstart="drag(event)" width="336" height="69">
</body>
</html>

Kokeile itse

Se saattaa näyttää hieman monimutkaiselta, mutta tutkitaanpa kaikkia vedonlyöntitapahtumien eri osia.

Aseta elementti vedettäväksi

Ensimmäinen askel: Jotta elementti voidaan tehdä vedettäväksi, aseta draggable-ominaisuus arvoon true:

<img draggable="true">

Kuvaus vedonlyöntiin - ondragstart ja setData()

Sitten määritellään, mitä tapahtuu, kun elementti vedetään.

Yllä olevassa esimerkissä ondragstart-ominaisuus kutsuu drag(event)-funktiota, joka määrittää, mitä tietoja vedetään.

dataTransfer.setData() -menetelmä asettaa vedettävän datan tietotyyppin ja arvon:

function drag(ev) {
    ev.dataTransfer.setData("text", ev.target.id);
}

Tässä esimerkissä tietotyyppi on "text" ja arvo on tämän liukuvan elementin id ("drag1").

Sijoittaminen mihin - ondragover

Ondragover-tapahtuma määrittää, mihin vedetyn datan voidaan sijoittaa

Oletuksena data/elementtiä ei voida sijoittaa toiseen elementtiin. Jotta toteutetaan vetäminen ja sijoittaminen, meidän on estettävä elementin tämä oletusarvoinen käsitellyys

Tämä tehtävä suoritetaan ondragover-tapahtuman event.preventDefault()-menetelmällä：

event.preventDefault()

Sijoita - ondrop

Kun vedetty data vapautetaan, tapahtuu drop-tapahtuma.

Yllä olevassa esimerkissä ondrop-ominaisuus kutsuu funktiota, drop(event)：

function drop(ev) {
    ev.preventDefault();
    var data = ev.dataTransfer.getData("text");
    ev.target.appendChild(document.getElementById(data));
}

Koodin selitys:

  • Kutsu preventDefault() estääksesi selaimeen liittyvän oletusarvoisen tiedonkäsittelyn (drop-tapahtuman oletusarvoinen käyttäytyminen on avata linkkinä)
  • Hanki vedetty data dataTransfer.getData("text")-menetelmällä. Tämä menetelmä palauttaa kaikki setData()-menetelmässä asetetut samanlaiset tiedot
  • Vedetty data on vedetyn elementin id ("drag1")
  • Lisää vedetty elementti sijoitettavaan elementtiin

Lisää esimerkkejä

Vetä kuvaa ylös ja alas

Miten vetää kuvaa yhdestä <div>-elementistä toiseen <div>-elementtiin:

Tuo CodeW3C.com:n kuva suorakulmioiden sisälle.

Kokeile itse