API HTML5 za povleci in spusti (DnD) pomeni, da lahko skoraj vsak element na strani postane vlečljiv. V tem članku bomo predstavili osnove povleci in spusti.
Ustvarite vsebino, ki jo je mogoče povleči
Vredno je omeniti, da so v večini brskalnikov izbori besedila, slike in povezave privzeto povlečeni. Na primer, če povlečete Google logotip v Google Search, boste videli duhovno sliko. Sliko je nato mogoče povleči in spustiti v naslovno vrstico <vhodni tip="datoteka" /> element ali celo na namizju. Da bi druge vrste vsebin naredili vlečljive, morate uporabiti HTML5 DnD API.
Da bi bil objekt vlečljiv, nastavite elementdraggable=true。 Povlečenje je podprto za skoraj vsak element, vključno s slikami, datotekami, povezavami, datotekami ali katerimkoli označevanjem na strani.
V našem primeru bomo ustvarili vmesnik za preurejanje nekaterih stolpcev, ki so bili razporejeni prek CSS Grid. Osnovna oznaka za te stolpce je prikazana spodaj, pri čemer je za vsak stolpec nastavljena lastnost povlečenja na true.
Tukaj je CSS za moje elemente kontejnerja in škatle. Upoštevajte, da je edini CSS, povezan z DnD funkcionalnostjo, lastnost kazalec: premik. Preostanek kode nadzoruje le postavitev in slog elementov kontejnerja in škatle.
Takrat boste videli, da lahko predmet povlečete, vendar se ne bo zgodilo nič drugega. Za dodajanje funkcionalnosti DnD moramo uporabiti JavaScript API.
Poslušajte drag dogodke
Za spremljanje celotnega procesa povleci in spusti je mogoče priklopiti številne različne dogodke.
- Dragstart
- vleči
- dragenter
- dragleave
- Dragover
- kaplja
- povleci
Za obdelavo DnD toka potrebuješ nekakšen izvorni element (začetno točko vlečenja), podatkovni paket (tisto, kar želiš postaviti) in cilj (območje, kjer je snap postavljen). Izvorni elementi so lahko slike, seznami, povezave, datotečni objekti, HTML bloki itd. Cilj je sprejeti območje odmeta (ali nabor območij odmetavanja) podatkov, ki jih uporabnik poskuša postaviti. Upoštevajte, da niso vsi elementi lahko cilji, na primer slike ne morejo biti cilji.
Začni in končaj zaporedje povleci in spusti
Po definiranju lastnosti draggable="true" na vsebini pripnite obravnavo dogodkov dragstart, ki začne zaporedje DnD za vsak stolpec.
Ta koda nastavi prosojnost stolpca na 40 %, ko uporabnik začne vleči, nato pa jo ob koncu povlečenja povrne na 100 %.
Rezultate si lahko ogledate v spodnjem Glitch demou. Če povlečeš predmet, postane neprozoren. Ker dogodek povlecenja cilja na izvorni element, nastavitev this.style.opacity na 40 % uporabniku vizualno potrdi, da se trenutno izbran element premika. Ko je predmet postavljen, se izvorni element vrne na 100 % prosojnost, čeprav funkcija postavitve še ni zapisana.
Uporabi dragenter, dragover in dragleave za dodajanje dodatnih vizualnih namigov
Da bi uporabnikom pomagali razumeti, kako komunicirati z vašim vmesnikom, uporabite upravljavce dogodkov dragenter, dragover in dragleave. V naslednjem primeru je mogoče stolpce povleči ali ciljati. Da bi uporabnikom to lažje razumeli, ko uporabnik povleče element mimo stolpca, se rob tega stolpca spremeni v pikčasto črto. Na primer, v CSS lahko ustvarite nadrazred, ki predstavlja element, ki je cilj postavitve:
Nato v JavaScriptu nastavite obravnavo dogodkov, ki doda nadrazred ob povlečenju mimo stolpca in ga odstrani ob izhodu. Pri obravnavniku dragenda želimo tudi zagotoviti, da je razred odstranjen na koncu draga.
V tej kodi je treba omeniti nekaj točk:
Ko povlečete element, kot je povezava, morate blokirati privzeto vedenje brskalnika, torej navigacijo do te povezave. Za to pokličite e.preventDefault() v dogodku dragover. Druga dobra praksa je, da pri istem handlerju vrnete false (napačno).
Uporabi obvladovalnik dogodkov dragenter za preklapljanje med razredi, ne za dragover. Če uporabiš dragover, se razred CSS večkrat preklopi, ker se dragover dogodkov sproži, ko stolpec lebdi. Sčasoma bo to povzročilo, da bo upodabljalnik brskalnika opravil veliko nepotrebnega dela. Najbolje je, da risanje vedno zmanjšate na minimum. Če iz kakršnega koli razloga potrebujete dragover dogodke, razmislite o omejevanju ali odstranitvi poslušalcev dogodkov.
Dokončajte postavitev
Za obravnavo dejanske postavitve dodajte poslušalec dogodkov za dogodek drop. V obdelovalniku dropov morate blokirati privzeto vedenje postavljanja v brskalniku, kar je običajno nekakšno nadležno preusmerjanje. e.stopPropagation() lahko pokličemo, da preprečimo, da bi dogodek sprožil DOM.
Poskrbite, da boste novega handlerja registrirali v drugem handlerju:
Če kodo zaženete zdaj, projekt ne bo postavljen na novo lokacijo. Za to morate uporabiti objekt DataTransfer.
Lastnost dataTransfer je kraj, kjer se dogajajo vsi DnD čudeži. Shranjuje podatkovne fragmente, poslane med operacijo povleka. DataTransfer je nastavljen v dogodku povleci in se bere/obdeluje v dogodku drop. Pokličite e.dataTransfer.setData(mimeType, dataPayload), da nastavite tip MIME in podatkovno vsebino objekta.
V naslednjem primeru bomo uporabnikom dovolili preureditev vrstnega reda stolpcev. Za to morate najprej shraniti HTML izvornega elementa na začetku povlečenja:
Uredite postavitev stolpcev v dogodku za izpust, nastavite HTML iz izvornega stolpca na HTML ciljnega stolpca, kjer je stolpec postavljen, najprej preverite, ali je ciljni stolpec, ki ga je uporabnik povlekel in spustil, enak izvornemu stolpcu.
Več lastnosti upora
Objekt dataTransfer razkriva lastnosti, ki se uporabljajo za zagotavljanje vizualnih povratnih informacij uporabniku med postopkom vlečenja. Te lastnosti se lahko uporabijo tudi za nadzor, kako se vsak cilj postavitve odziva na določene vrste podatkov.
- dataTransfer.effectAllowed omejuje "vrsto vlečenja", ki ga lahko uporabnik izvede na določenem elementu. Uporablja se v modelu za upravljanje povleci in spusti za inicializacijo učinka dropEffect med dogodki dragenter in dragover. To lastnost lahko nastavite na naslednje vrednosti: none, copy, copyLink, copyMove, link, linkMove, move, all in uninitialized.
- dataTransfer.dropEffect nadzoruje povratne informacije, ki jih uporabnik prejme med dogodki povlecenja in povleka. Ko uporabnik preide nad ciljni element, bo kazalec brskalnika pokazal vrsto dejanja, ki ga je treba izvesti (npr. kopiranje, premikanje itd.). Učinek je lahko ena od naslednjih vrednosti: nič, kopiraj, poveži, premakni.
- e.dataTransfer.setDragImage(imgElement, x, y) označuje, da privzeta povratna informacija brskalnika o "duhovni sliki" ni uporabljena, temveč obstaja možnost nastavitve ikone povlecenja.
Nalaganje datotek z vlečenjem in spuščanjem
Naslednji preprost primer uporablja stolpec kot vir vlečenja in cilj za vlečenje. To se lahko vidi v uporabniškem vmesniku, ko uporabnika prosijo, naj preuredi predmete. V nekaterih primerih je lahko povlečenje cilja in vlečenje vira različno, na primer v vmesniku, kjer mora uporabnik izbrati sliko kot glavno sliko izdelka tako, da izbrano sliko povleče na cilj.
Pogosto se uporabljajo povleci in spusti, da uporabniki lahko povlečejo predmete z namizja v aplikacijo. Glavna razlika je v drop handlerju. Brez uporabe dataTransfer.getData() za dostop do datoteke bodo podatki datoteke vključeni v lastnost dataTransfer.files:
Izvirna povezava:Prijava do hiperpovezave je vidna.
|
Objavljeno 26. 4. 2022 ob 10:30:50
|
|
|
|
Objavljeno 26. 4. 2022 ob 21:27:25
|
