TL; DR – HTML5 Vedä ja pudota -sovellusliittymän avulla voit Tartu HTML-objekti kohdistimellasi ja vedä se toiseen paikkaan.
Mitä voit vetää ja pudottaa HTML5: ssä?
HTML5: n avulla voit tehdä minkä tahansa elementin vedettäväksi, jolloin voit noutaa sen kohdistimella ja vetää sen toiseen paikkaan, joka määritetään pudotettavaksi elementiksi. Yritä vetää kuva alla olevassa esimerkissä neliöön:
Tämä toiminto yksinkertaistaa käyttökokemusta ja mahdollistaa jopa yksinkertaisten verkkopelien luomisen (esim. Voit vetää ja pudottaa virtuaalisia shakkipaloja). Kun vedät elementtiä, sen läpinäkyvä kopio liikkuu kohdistimen mukana, kunnes pudotat sen vapauttamalla hiiren painikkeen.
Vedä ja pudota on teknisesti HTML5: ään lisätty JavaScript-sovellusliittymä. Siksi on tärkeää, että sinulla on vähintään perustiedot ohjelmoinnista, jotta voisit työskennellä tämän toiminnon kanssa.
HTML5: n vedä ja pudota -tapahtumat
Alla olevassa taulukossa näet kaikki vedä ja pudota -toiminnon kannalta merkitykselliset tapahtumat:
| Tapahtuma | Selitys |
|---|---|
| vedä | Kohdistin liikkuu vetämällä elementtiä |
| pudotus | Vedä prosessi päättyy |
| dragstart | Kohdistin hakee elementin ja alkaa vetää |
| dragend | Hiiren painike vapautetaan ja pudotetaan elementti |
| dragenter | Kohdistin syöttää kohde-elementin |
| vedä | Kohdistin jättää kohde-elementin |
| dragover | Kohdistin siirtyy kohde-elementin |
Askel askeleelta Vedon ja pudotuksen selitys
HTML5 vedä ja pudota -koodaus näyttää ensi silmäyksellä melko monimutkaiselta, koska se sisältää komentosarjat JS: ssä. Tutkitaan kuitenkin prosessin jokaista osaa, jotta sen ymmärtäminen olisi helpompaa.
Vedettävät elementit
Ensinnäkin sinun on varmistettava, että vedettävällä elementillä on HTML5 draggable -attribuutti on sovellettu ja sen arvoksi on asetettu true:
vetäminen
Määritä sitten mitä objektin vetämisen jälkeen pitäisi tapahtua. Voit tehdä sen soittamalla dragstart -tapahtuman tapahtumakäsittelijä ja suoritettavan toiminnon määrittely.
Vedetyn datan arvon ja tietotyypin on asetettava dataTransfer.setData() -menetelmä:
pudottaminen
HTML5 vedettävät tiedot määritetään liittämällä tapahtumakäsittelijä tapahtumaan dragover.
Elementtejä ja tietoja ei voi pudotettiin oletusarvoisesti muihin elementteihin. Tämä tarkoittaa, että joudut lopettamaan elementin oletuskäyttäytyminen event.preventDefault() -menetelmällä:
drop -tapahtuma tapahtuu, kun HTML5: n vedettävät tiedot pudotetaan. Sitä kutsuu tapahtuman käsittelijä ondrop:
Lopullinen koodi: esimerkki
Periaatteessa tarvitset koodisi voidaksesi suorita neljä vaihetta:
- Estä verkkoselaimen tietoihin liittyvä oletustoiminto soittamalla numeroon
preventDefault() - Hae tiedot
dataTransfer.getData()-menetelmällä - kiinnitä vedetty elementti pudotuselementtiin
Katsotaan, miten se toimii alla oleva esimerkki:
HTML5 Vedä ja pudota: hyödyllisiä vinkkejä
- Voit vetää erityyppisiä elementtejä, mukaan lukien, mutta ei rajoittuen, tiedostot, linkit, kuvat ja teksti.
- Voit myös vetää useita elementtejä kerralla. On kuitenkin suositeltavaa, että ne kaikki ovat samassa muodossa yhtenäisyyden takaamiseksi.
- Käyttäjän syötteitä hyväksyvät lomakeelementit voivat olla oletusarvoisesti pudotettavia alueita.