HTML5 raahaus ja pudotus

Tuo CodeW3C.com-kuvat suorakulmioiden sisälle.

Vedä ja pudota

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

Vedä ja pudota on HTML5-standardin osa: mikä tahansa elementti on vedettävissä.

Selaintuki

Taulukon numerot osoittavat ensimmäisen täysin tukevan selausversion vedä ja pudota.

API
Vedä ja pudota 4.0 9.0 3.5 6.0 12.0

HTML vedä ja pudota esimerkki

Seuraava on yksinkertainen vedä ja pudota -esimerkki:

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 kaikki vedä ja pudota -tapahtumat.

Aseta elementti liukuvaksi

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

<img draggable="true">

Vedä ja pudota sisältö - 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").

Sijoita mihin - ondragover

Ondragover-tapahtuma määrittää, mihin vedettävät tiedot voidaan sijoittaa.

Oletuksena data/elementti ei voi olla sijoitettu toiseen elementtiin. Tavoitteen saavuttamiseksi meidän on estettävä elementin tämä oletusarvoinen käsittelytapa.

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

event.preventDefault()

Sijoita - ondrop

Kun vedetty tieto vapautetaan, tapahtuu drop-tapahtuma.

Yllä olevassa esimerkissä ondrop-ominaisuus kutsui funktio drop(event)：

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

Koodin selitys:

  • Kutsutaan preventDefault() estääksemme selaimeen tiedon oletusarvoisen käsittelyn (drop-tapahtuman oletusarvoinen käyttäytyminen on avata linkkinä)
  • Obtaistaan vedetyn tiedon dataTransfer.getData() metodilla. Tämä metodi palauttaa setData() metodissa asetetun saman tyyppisen tiedon
  • Vedetty tieto on vedetyn elementin id ("drag1")
  • Lisää vedetty elementti asetettuun elementtiin

Lisää esimerkkejä

Vetä ja pudota kuvia

Miten kuvia voidaan vetää ja pudottaa kahden <div>-elementin välillä:

Tuo CodeW3C.com-kuvat suorakulmioiden sisälle.

Kokeile itse