HTML5-vedä-ja-pudota (DnD) API tarkoittaa, että lähes mikä tahansa sivun elementti voi muuttua vedettäviksi. Tässä artikkelissa käymme läpi vedän ja pudota -toiminnon perusteet.
Luo vedettävää sisältöä
On syytä huomata, että useimmissa selaimissa tekstivalinnat, kuvat ja linkit ovat oletuksena vedettävissä. Esimerkiksi, jos vedät Google-logon Google-haussa, näet haamukuvan. Kuva voidaan sitten vetää ja pudottaa osoitepalkkiin, <input type="file" /> elementtiin tai jopa työpöydälle. Jotta muut sisältötyypit olisivat vedettäviä, sinun täytyy käyttää HTML5 DnD API:ta.
Jotta objekti saadaan vedettäväksi, aseta alkiodraggable=true。 Vedämistä voidaan tukea lähes mille tahansa elementille, mukaan lukien kuvat, tiedostot, linkit, tiedostot tai mikä tahansa merkintä sivulla.
Esimerkissämme luomme rajapinnan, jolla voimme järjestää joitakin sarakkeita, jotka on järjestetty CSS Gridin kautta. Näiden sarakkeiden perusmerkintä on esitetty alla, ja vedettävissä oleva ominaisuus on asetettu tosiksi jokaiselle sarakkeelle.
Tässä on CSS kontti- ja laatikkoelementeilleni. Huomaa, että ainoa DnD-toiminnallisuuteen liittyvä CSS on kursori: move-ominaisuus. Muu koodi ohjaa vain kontin ja laatikon elementtien asettelua ja tyyliä.
Tässä vaiheessa näet, että voit vetää esinettä, mutta mitään muuta ei tapahdu. DnD-toiminnallisuuden lisäämiseksi meidän täytyy käyttää JavaScript-rajapintaa.
Kuuntele drag-tapahtumia
Monia erilaisia tapahtumia voidaan liittää seuraamaan koko vedä-ja-pudota -prosessia.
- Dragstart
- vetää
- Dragenter
- Dragleave
- dragover
- pisara
- dragend
DnD-virran käsittelyyn tarvitaan jonkinlainen lähdeelementti (vetämisen lähtöpiste), datakuorman (mitä yrität sijoittaa) ja kohteen (alue, johon snap sijoitetaan). Lähdeelementtejä voivat olla kuvat, listat, linkit, tiedostoobjektit, HTML-lohkot jne. Tavoitteena on hyväksyä pudotusalue (tai joukko pudotusalueita) datasta, jonka käyttäjä yrittää sijoittaa. Muista, että kaikki elementit eivät voi olla tavoitteita, esimerkiksi kuvat eivät voi olla tavoitteita.
Aloita ja lopeta vedä-ja-pudota -sekvenssi
Kun sisältöön on määritelty draggable="true"-ominaisuus, liitä dragstart-tapahtuman käsittelijä, joka käynnistää DnD-sekvenssin jokaiselle sarakkeelle.
Tämä koodi asettaa sarakkeen läpinäkyvyyden 40 %:iin, kun käyttäjä alkaa vetää, ja palauttaa sen sitten 100 %:iin raahaamistapahtuman lopussa.
Tulokset löytyvät alla olevasta Glitch-demosta. Kun vedät esinettä, siitä tulee läpinäkymätön. Koska dragstart-tapahtuma kohdistuu lähdeelementtiin, asettamalla this.style.opacity 40 % antaa käyttäjälle visuaalisen palautteen siitä, että valittu elementti liikkuu. Kun kohde on asetettu, lähdeelementti palautuu 100 % läpinäkyvyyteen, vaikka sijoitusfunktiota ei ole vielä kirjoitettu.
Käytä dragenteria, dragoveria ja dragleavea lisätäksesi visuaalisia vihjeitä
Auttaaksesi käyttäjiä ymmärtämään, miten käyttöliittymäsi voi olla vuorovaikutuksessa, käytä dragenteria, dragoveria ja dragleave-tapahtumankäsittelijöitä. Seuraavassa esimerkissä sarakkeita voidaan vetää tai kohdentaa. Käyttäjien ymmärtämiseksi tämä, kun käyttäjä vetää kohteen sarakkeen ohi, sarakkeen reuna muuttuu katkoviivaksi. Esimerkiksi voit luoda over-luokan CSS:ssä esittämään alkiota, joka on sijoituskohde:
Sitten aseta JavaScriptissä tapahtumankäsittelyohjelma, joka lisää over-luokan vetäessä sarakkeen ohi ja poistaa sen poistuessa. Dragend-handlerissa haluamme myös varmistaa, että luokka poistetaan vedon lopussa.
Tässä koodissa on muutama huomionarvoinen seikka:
Kun vedät elementtiä, kuten linkkiä, sinun täytyy estää selaimen oletustoiminto, eli navigointi kyseiseen linkkiin. Tätä varten kutsu e.preventDefault() dragover-tapahtumassa. Toinen hyvä käytäntö on palauttaa false samassa käsittelijässä.
Käytä dragenter-tapahtumankäsittelijää luokkien vaihtamiseen, älä dragoveria. Jos käytät dragoveria, CSS-luokka kytketään päälle useita kertoja, koska tapahtumadragover laukeaa jatkuvasti, kun sarake leijuu. Lopulta tämä aiheuttaa selaimen renderöijälle paljon turhaa työtä. On parasta aina piirtää uudelleen. Jos tarvitset dragover-tapahtumia jostain syystä, harkitse tapahtumakuuntelijoiden rajoittamista tai poistamista.
Viimeistele sijoitus
Varsinaisen sijoittelun hoitamiseksi lisää tapahtuman kuuntelija pudotustapahtumaan. Pudotuskäsittelijässä sinun täytyy estää selaimen oletussijoittelu, joka on yleensä jonkinlainen ärsyttävä uudelleenohjaus. e.stopPropagation() voidaan kutsua estämään tapahtuman laukaiseminen DOM:ia.
Varmista, että rekisteröit uuden käsittelijän toiseen käsittelijään:
Jos käytät koodin tällä hetkellä, projektia ei sijoiteta uuteen paikkaan. Tämän saavuttamiseksi sinun täytyy käyttää DataTransfer-objektia.
DataTransfer-ominaisuus on se, missä kaikki DnD-ihmeet tapahtuvat. Se tallentaa raahaamisoperaatiossa lähetetyt datafragmentit. dataTransfer asetetaan dragstart-tapahtumassa ja luetaan/käsitellään pudotustapahtumassa. Kutsu e.dataTransfer.setData(mimeType, dataPayload) asettaaksesi objektin MIME-tyypin ja datakuorman.
Seuraavassa esimerkissä sallimme käyttäjien järjestää sarakkeiden järjestystä uudelleen. Tätä varten sinun täytyy ensin tallentaa lähdeelementin HTML vedän alkuun:
Käsittele sarakkeen sijoittelu drop-tapahtumassa, aseta lähdesarakkeen HTML kohdesarakkeen HTML:ksi, johon se on sijoitettu, ja tarkista ensin, että käyttäjän vetämä ja pudottama kohdesarake on sama kuin lähdesarakke.
Lisää vastusominaisuuksia
dataTransfer-objekti paljastaa ominaisuuksia, joita käytetään visuaalisen palautteen antamiseen käyttäjälle vetämisprosessin aikana. Näitä ominaisuuksia voidaan myös käyttää ohjaamaan sitä, miten kukin sijoituskohde reagoi tiettyihin tietotyyppeihin.
- dataTransfer.effectAllowed rajoittaa käyttäjän "drag-tyyppiä", jonka käyttäjä voi tehdä elementille. Sitä käytetään vedä-ja-pudota -käsittelymallissa dropEffectin alustamiseen dragenter- ja dragover-tapahtumien aikana. Tämä ominaisuus voidaan asettaa seuraaviin arvoihin: none, copy, copyLink, copyMove, link, linkMove, move, all ja alustamaton.
- dataTransfer.dropEffect ohjaa käyttäjälle annettua palautetta dragenter- ja dragover-tapahtumien aikana. Kun käyttäjä leijuu kohdeelementin yläpuolella, selaimen kursori ilmoittaa suoritettavan toiminnon tyypin (esim. kopioiminen, siirtäminen jne.). Vaikutus voi olla jokin seuraavista arvoista: ei, copy, link, move.
- e.dataTransfer.setDragImage(imgElement, x, y) tarkoittaa, että selaimen oletus "ghost image" -palautetta ei käytetä, vaan sen sijaan on mahdollisuus asettaa drag-kuvake.
Lataa tiedostoja vetämällä ja pudottamalla
Seuraava yksinkertainen esimerkki käyttää saraketta vetämisen lähteenä ja raahaamiskohteena. Tämä näkyy käyttöliittymässä, kun käyttäjää pyydetään järjestämään kohteet uudelleen. Joissain tapauksissa kohteen ja lähteen vetäminen voi olla eri asia, esimerkiksi käyttöliittymässä, jossa käyttäjän täytyy valita kuva tuotteen pääkuvaksi vetämällä valittu kuva kohteeseen.
Vedä ja pudota -toimintoa käytetään usein siihen, että käyttäjät voivat vetää esineitä työpöydältä sovellukseen. Suurin ero on pudotuksen käsittelijä. Ilman dataTransfer.getData():n käyttöä tiedoston käsittelyyn tiedoston tiedot sisältyvät dataTransfer.files-ominaisuuteen:
Alkuperäinen linkki:Hyperlinkin kirjautuminen on näkyvissä.
|
Julkaistu 2022-4-26 klo 10:30:50
|
|
|
|
Julkaistu 2022-4-26 21:27:25
|
