HTML5 lohistamise (DnD) API tähendab, et peaaegu iga lehe element võib muutuda lohistatavaks. Selles artiklis käsitleme lohistamise ja kukutamise põhitõdesid.
Loo lohistatavat sisu
Tasub märkida, et enamikus brauserites on tekstivalikud, pildid ja lingid vaikimisi lohistatavad. Näiteks, kui lohistad Google'i logo Google'i otsingus, näed kummituspilti. Pilti saab seejärel lohistada ja visata aadressiribale, <input type="file" /> elemendile või isegi töölauale. Et muuta muud tüüpi sisu lohistatavaks, tuleb kasutada HTML5 DnD API-d.
Et muuta objekt lohistatavaks, määra elementdraggable=true。 Lohistamist saab toetada peaaegu iga elemendi puhul, sealhulgas piltide, failide, linkide, failide või mis tahes märgistuse puhul lehel.
Meie näites loome liidese, et ümber korraldada mõningaid veerge, mis on paigutatud CSS Gridi kaudu. Nende veergude põhiline märgistus on toodud allpool, kus lohistamise omadus on iga veeru jaoks seatud tõeks.
Siin on minu konteineri ja kastielementide CSS. Pane tähele, et ainus CSS, mis on seotud DnD funktsionaalsusega, on kursor: move omadus. Ülejäänud kood kontrollib ainult konteineri ja kastielementide paigutust ja stiili.
Sel hetkel näed, et saad eset lohistada, aga midagi muud ei juhtu. DnD funktsionaalsuse lisamiseks peame kasutama JavaScripti API-d.
Kuula drag-üritusi
Kõiki lohistamis- ja viskamisprotsessi jälgimiseks saab lisada palju erinevaid sündmusi.
- Dragstart
- Lohistage
- dragenter
- Dragleave
- dragover
- Tilk
- dragend
DnD voo töötlemiseks on vaja mingit allikaelementi (lohistamise alguspunkt), andmekoormust (mida püüad paigutada) ja sihtmärki (ala, kuhu snap paigutatakse). Lähteelemendid võivad olla pildid, loendid, lingid, failiobjektid, HTML-plokid jne. Eesmärk on aktsepteerida andmete langetusala (või langetusalade komplekt), mida kasutaja püüab paigutada. Pea meeles, et kõik elemendid ei saa olla eesmärgid, näiteks pildid ei saa olla eesmärgid.
Alusta ja lõpeta lohistamisjärjestus
Pärast sisule draggable="true" omaduse määratlemist lisa lohistamissündmuste käsitleja, mis käivitab iga veeru DnD jada.
See kood seab veeru läbipaistvuse 40%-le, kui kasutaja hakkab lohistama, ja seejärel taastab veeru 100%-le lohistamise sündmuse lõpus.
Tulemusi saab vaadata allpool Glitchi demos. Kui lohista eset, muutub see läbipaistmatuks. Kuna lohistamissündmus sihib lähteelementi, annab this.style.opacity seadmine 40% kasutajale visuaalse tagasiside, et valitud element liigub. Pärast eseme paigutamist taastub lähteelement 100% läbipaistvusele, kuigi paigutusfunktsiooni pole veel kirjutatud.
Kasuta dragenterit, dragoverit ja dragleave'i, et lisada täiendavaid visuaalseid vihjeid
Et aidata kasutajatel mõista, kuidas sinu liidesega suhelda, kasuta dragenteri, dragoveri ja dragleave'i sündmuste haldureid. Järgmises näites saab veerge lohistada või sihtida. Et kasutajad saaksid sellest paremini aru, kui kasutaja lohistab eseme mööda veergu, muutub selle veeru serv katkendjooneks. Näiteks saad CSS-is luua üleklassi, mis esindab elementi, mis on paigutussihtmärk:
Seejärel seadista JavaScriptis sündmuste haldur, mis lisab üleklassi, kui lohistad veeru mööda, ja eemaldab selle lahkumisel. Dragendi käitlejas tahame samuti veenduda, et klass eemaldatakse lohistamise lõpus.
Selles koodis on mõned punktid, mida mainida:
Kui lohistad elementi, näiteks linki, pead blokeerima brauseri vaikimisi käitumise, milleks on selle lingi juurde navigeerimine. Selleks kutsu dragoveri sündmuses e.preventDefault(). Teine hea tava on tagastada vale fail samas haldajas.
Kasuta dragenter sündmuse haldajat klasside vahetamiseks, mitte dragoverit. Kui kasutad dragoverit, lülitatakse CSS klass mitu korda sisse, sest sündmuse dragover käivitub, kui veerg hõljub. Lõpuks põhjustab see, et brauseri renderdaja teeb palju tarbetut tööd. Parim on alati hoida uuesti joonistamist minimaalsena. Kui sul on mingil põhjusel vaja dragoveri üritusi, kaalu ürituste kuulajate piiramist või eemaldamist.
Lõpeta paigutus
Tegeliku paigutuse haldamiseks lisa drop eventile sündmuse kuulaja. Drop handleris pead blokeerima brauseri vaikimisi paigutuse käitumise, mis on tavaliselt mingi tüütu ümbersuunamine. e.stopPropagation() saab kutsuda, et takistada sündmusel DOM-i käivitamist.
Veendu, et registreerid uue haldaja teises haldajas:
Kui käivitad koodi sel ajal, ei paigutata projekti uude asukohta. Selleks tuleb kasutada DataTransfer objekti.
DataTransferi omadus on koht, kus kõik DnD imed toimuvad. See salvestab lohistamisoperatsioonis saadetud andmefragmendid. dataTransfer on seatud lohistamissündmuses ja loetakse/töödeldakse drop-sündmuses. Kutsu e.dataTransfer.setData(mimeType, dataPayload), et määrata objekti MIME tüüp ja andmekoormus.
Järgmises näites lubame kasutajatel veergude järjekorda ümber korraldada. Selleks pead esmalt salvestama algelemendi HTML-i lohistamise algusesse:
Käsitle veeru paigutust drop-sündmuses, sea lähteveeru HTML sihtveeru HTML-iks, kuhu see on paigutatud, kontrolli esmalt, et kasutaja lohistatud ja maha pandud sihtveerg oleks sama mis lähteveerg.
Rohkem takistusomadusi
DataTransfer-objekt avab omadused, mida kasutatakse lohistamisprotsessi ajal kasutajale visuaalse tagasiside andmiseks. Neid omadusi saab kasutada ka selleks, et kontrollida, kuidas iga paigutussihtmärk reageerib konkreetsetele andmetüüpidele.
- dataTransfer.effectAllowed piirab kasutaja "lohistamise tüüpi", mida kasutaja saab elemendile teha. Seda kasutatakse lohistamismudelis dropEffecti initsialiseerimiseks dragenteri ja dragoveri sündmuste ajal. Seda omadust saab määrata järgmistele väärtustele: none, copy, copyLink, copyMove, link, linkMove, move, all ja uninitialized.
- dataTransfer.dropEffect kontrollib kasutajale antud tagasisidet dragenteri ja dragoveri sündmuste ajal. Kui kasutaja hõljub sihtelemendi kohal, näitab brauseri kursor tegevuse tüüpi (nt kopeerimine, liigutamine jne). Efekt võib olla üks järgmistest väärtustest: none, copy, link, move.
- e.dataTransfer.setDragImage(imgElement, x, y) näitab, et brauseri vaikimisi "kummituspildi" tagasisidet ei kasutata, vaid selle asemel on valik lohistamisikooni seadistamiseks.
Failide üleslaadimine lohistades ja maha jättes
Järgmine lihtne näide kasutab veergu lohistamisallikana ja lohistamissihtmärgina. Seda võib näha kasutajaliideses, kui kasutajalt palutakse esemeid ümber korraldada. Mõnel juhul võib sihtmärgi ja allika lohistamine olla erinev, näiteks liideses, kus kasutaja peab valima pildi toote põhipildiks, lohistades valitud pildi sihtmärgile.
Lohistamist kasutatakse sageli selleks, et kasutajad saaksid esemeid töölaualt rakendusse lohistada. Peamine erinevus on drop-handler. Ilma dataTransfer.getData() kasutamiseta failile ligi pääsemiseks lisatakse faili andmed dataTransfer.files omadusse:
Originaallink:Hüperlingi sisselogimine on nähtav.
|
Postitatud 2022-4-26 10:30:50
|
|
|
|
Postitatud 2022-4-26 21:27:25
|
