HTML5 Drag and Drop -sovellusliittymän käyttäminen

HTML5 Drag and Drop (DnD) -sovellusliittymä tarkoittaa, että voimme tehdä melkein minkä tahansa sivumme elementin vedettäväksi. Tässä viestissä selitämme vetämisen perusteet ja pudota.

Vedettävän sisällön luominen #

On syytä huomata, että useimmissa selaimissa tekstivalinnat, kuvat ja linkit ovat oletusarvoisesti vedettävissä. Esimerkiksi, jos vedät Google-logo Google-haussa näet haamukuvan. Kuva voidaan sitten pudottaa osoiteriville, <input type="file" /> -elementtiin tai jopa työpöydälle. Muunlaisen sisällön vetämiseksi vedettäväksi sinun on käytettävä HTML5 DnD -sovellusliittymiä.

Objektin vetäminen lohkoon draggable=true tälle elementille. Melkein mitä tahansa voidaan vetää, kuvia, tiedostoja , linkkejä, tiedostoja tai mitä tahansa sivusi merkintöjä.

Esimerkissämme luomme käyttöliittymän joidenkin sarakkeiden järjestämiseksi uudelleen, jotka on järjestetty CSS Gridillä. Sarakkeiden perusmerkinnät näyttävät tämän jokaisella sarakkeella on

määritteeksi asetettutrue.

Tässä on säilöni ja laatikkoelementtien CSS. Huomaa, että ainoa CSS DnD-toimintoihin liittyvä ominaisuus on cursor: move. Muu koodi ohjaa vain säilön ja laatikon elementtien asettelua ja tyyliä.

Tässä vaiheessa huomaa, että voit vetää kohteita, mutta mitään muuta ei tapahdu. DnD-toiminnon lisäämiseksi meidän on käytettävä JavaScript-sovellusliittymää.

Tapahtumien vetäminen kuuntelussa #

On useita erilaisia tapahtumia, joihin voidaan liittää koko vedä ja pudota -prosessia.

• dragstart
• drag
• dragenter
• dragleave
• dragover
• drop
• dragend

DnD-vuon käsittelemiseen tarvitaan jonkinlainen lähde-elementti (josta vetovoima on peräisin), data pa yload (mitä yrität pudottaa) ja kohde (alue, jolla pudotus saadaan kiinni). Lähde-elementti voi olla kuva, luettelo, linkki, tiedosto-objekti, HTML-lohko jne. Kohde on pudotusalue (tai pudotusvyöhykkeiden joukko), joka hyväksyy tiedot, joita käyttäjä yrittää pudottaa. Pidä mielessä, että kaikki elementit eivät voi olla kohteita, esimerkiksi kuva ei voi olla kohde.

Aloitus ja lopetus vedä ja pudota -jakso #

Kun sisältöön on määritetty draggable="true" -määritteet, liitä dragstart tapahtumakäsittelijä käynnistää DnD-sekvenssi jokaiselle sarakkeelle.

Tämä koodi asettaa sarakkeen peittävyyden 40%: iin, kun käyttäjä alkaa vetää sitä, ja palauttaa sen sitten 100%: iin, kun vetotapahtuma päättyy.

Tulos näkyy alla olevassa Glitch-esittelyssä. Vedä kohde ja siitä tulee läpinäkymätön. Koska dragstart -tapahtuman kohde on lähde-elementti, asettamalla this.style.opacity arvoksi 40% käyttäjä saa visuaalinen palaute siitä, että elementti on parhaillaan siirrettävä valinta. Kun pudotat kohteen, vaikka pudotustoiminto ei ole paikallaan, lähde-elementti palaa 100 prosentin peittävyyteen.

Lisää uusia visuaalisia vihjeitä vetämällä, vetämällä ja vetämällä #

Auta käyttäjää ymmärtämään, miten vuorovaikutuksessa käyttöliittymän kanssa, käytä dragenter, dragover ja dragleave tapahtumankäsittelijät.Tässä esimerkissä sarakkeet ovat pudotuskohteita vetämisen lisäksi. Auta käyttäjää ymmärtää tämä tekemällä raja katkoviivaksi, kun ne pitävät vedettyä kohdetta sarakkeen päällä. Esimerkiksi CSS: ssä voit luoda luokan over edustamaan elementtejä, jotka ovat pudotuskohteita:

Sitten sinun J avaScript asetti tapahtumankäsittelijät, lisää over -luokka, kun sarake vedetään yli, ja poista se, kun poistumme. dragend käsittelijä, muista myös poistaa luokat vetämisen lopussa.

Tässä koodissa on muutama piste, joka kannattaa käsitellä :

• Jos vedät jotain linkin kaltaista, sinun on estettävä selaimen oletuskäyttäytyminen, joka on siirtyä kyseiseen linkkiin. Tätä varten soita e.preventDefault() dragover -tapahtumassa. Toinen hyvä käytäntö on palauttaa false samaan käsittelijään.
• dragenter -tapahtumakäsittelijää käytetään luokan over vaihtamiseen dragover .Jos käytät dragover, CSS-luokka vaihdettaisiin monta kertaa, kun tapahtuma dragover jatkoi sarakkeen leijuttamista. se aiheuttaisi selaimen renderöijä tehdä paljon tarpeetonta työtä.Piirrosten pitäminen minimiin on aina hyvä idea.Jos sinun on käytettävä dragover -tapahtumaa mihinkään, harkitse tapahtumakuuntelijan kuristamista tai vapauttamista.

pudotuksen #

Jos haluat käsitellä varsinaisen pudotuksen, lisää tapahtumakuuntelija tapahtumaan drop. drop -käsittelijässä sinun on estettävä selaimen pudotusten oletuskäyttäytyminen, joka on tyypillisesti jonkinlainen ärsyttävä uudelleenohjaus. Voit estää tapahtuman kuplimasta DOM: ää soittamalla e.stopPropagation().

Jos suoritat koodin tässä vaiheessa, kohde ei pudota uuteen sijaintiin. Tämän saavuttamiseksi sinun on käytettävä DataTransfer objekti.

Kaikki DnD-taikuudet tapahtuvat ominaisuudessa dataTransfer. Se pitää sisällään vetotoiminnossa lähetetyn datan. dataTransfer asetetaan dragstart -tapahtumaan ja luetaan / käsitellään pudotustapahtumassa. e.dataTransfer.setData(mimeType, dataPayload) -sarjan avulla voit asettaa objektin ”s MIME-tyyppi ja tietojen hyötykuorma.

Tässä esimerkissä annamme käyttäjien järjestää sarakkeiden järjestyksen uudelleen. Tätä varten sinun on ensin tallennettava lähde-elementin HTML, kun vedät alkaa:

Käsittelemässään drop -tapahtumassa sarakkeen pudotus, asettamalla lähdesarakkeen HTML-koodi pudotetun kohdesarakkeen HTML-koodiksi, tarkista ensin, että käyttäjä ei pudota takaisin samaan sarakkeeseen, josta hän veti.

Näet Vedä ja vapauta A-sarake B-sarakkeen päällä ja huomaa, kuinka ne vaihtavat paikkaa:

Lisää ominaisuuksien vetäminen #

dataTransfer -objekti paljastaa ominaisuudet, jotka antavat käyttäjälle visuaalista palautetta vetoprosessin aikana. Näillä ominaisuuksilla voidaan myös hallita kukin pudotuskohde vastaa tiettyyn tietotyyppiin.

• dataTransfer.effectAllowed rajoitin ts mitä ”vedon tyyppiä” käyttäjä voi suorittaa elementillä. Vedä ja pudota -prosessointimallissa sitä käytetään alustamaan dropEffect dragenter ja dragover -tapahtumat.Ominaisuus voidaan asettaa seuraaville arvoille: none, copy, copyLink, copyMove, link, linkMove, move, all ja uninitialized.
• dataTransfer.dropEffect ohjaa palautetta, jonka käyttäjälle annetaan dragenter ja dragover events.Kun käyttäjä vie hiiren kohde-elementin päälle, selaimen kohdistin ilmoittaa, minkä tyyppistä toimintaa aiotaan suorittaa (esim. kopio, siirto jne.). Vaikutus voi saada jonkin seuraavista arvoista: none, copy, link, move.
• e.dataTransfer.setDragImage(imgElement, x, y) tarkoittaa, että selaimen käyttämisen sijaan ” oletusarvoisen ”haamukuvan” palautteen avulla voit halutessasi asettaa vetokuvakkeen.

Tiedoston lataus vetämällä ja pudottamalla #

Tässä yksinkertaisessa esimerkissä sarake on sekä vedä lähde ja vedä kohde.Tämä saattaa näkyä käyttöliittymässä, jossa käyttäjää pyydetään järjestämään kohteet uudelleen.Joissakin tilanteissa vetotavoite ja lähde voivat olla erilaiset, kuten käyttöliittymä, jossa käyttäjän on valittava yksi kuva tuotteen pääkuvan vetämällä valitun kuvan kohteeseen.

Vedä ja pudota -toimintoa käytetään usein, jotta käyttäjät voivat vetää kohteita työpöydältä sovellukseen. Tärkein ero on drop -käsittelijä. Sen sijaan, että käyttää tiedostoja dataTransfer.getData(), heidän dataansa Sisältyy dataTransfer.files -ominaisuuteen:

Lisätietoja tästä on Mukautetussa vedä ja pudota -osiossa.