HTML5 API drag-and-drop (DnD) znamená, že takmer akýkoľvek prvok na stránke môže byť ťahateľný. V tomto článku sa pozrieme na základy drag and drop.
Vytvárajte obsah na ťahanie
Stojí za zmienku, že vo väčšine prehliadačov sú textové výbery, obrázky a odkazy predvolene ťahateľné. Napríklad, ak potiahnete logo Google vo vyhľadávaní Google, uvidíte duchovný obrázok. Obraz je potom možné pretiahnuť a vložiť do adresného riadku <input type="file" /> element, alebo dokonca na plochu. Aby ste urobili iné typy obsahu ťahateľnými, musíte použiť HTML5 DnD API.
Aby bol objekt ťahateľný, nastavte prvokdraggable=true。 Ťahanie môže byť podporované takmer pre akýkoľvek prvok, vrátane obrázkov, súborov, odkazov, súborov alebo akéhokoľvek značenia na stránke.
V našom príklade vytvoríme rozhranie na preusporiadanie niektorých stĺpcov, ktoré boli rozložené cez CSS Grid. Základné značkovanie pre tieto stĺpce je zobrazené nižšie, pričom vlastnosť ťahania je nastavená na true pre každý stĺpec.
Tu je CSS pre moje kontajnerové a boxové prvky. Všimnite si, že jediný CSS súvisiaci s funkcionalitou DnD je vlastnosť kurzora: pohyb. Zvyšok kódu riadi iba rozloženie a štýl kontajnerových a boxových prvkov.
V tomto bode uvidíte, že môžete predmet potiahnuť, ale nič iné sa nestane. Na pridanie funkcionality DnD potrebujeme použiť JavaScript API.
Počúvajte drag podujatia
Na monitorovanie celého procesu drag-and-drop je možné pripojiť mnoho rôznych udalostí.
- Dragštart
- ťahať
- Dragenter
- dragleave
- Dragover
- kvapka
- Dragend
Na spracovanie DnD streamu potrebuješ nejaký zdrojový prvok (východiskový bod dragu), dátový payload (to, čo sa snažíš umiestniť) a cieľ (oblasť, kde je snap umiestnený). Zdrojové prvky môžu byť obrázky, zoznamy, odkazy, súborové objekty, HTML bloky a podobne. Cieľom je prijať zónu (alebo súbor zón odovzdania) dát, ktoré sa používateľ snaží umiestniť. Majte na pamäti, že nie všetky prvky môžu byť cieľmi, napríklad obrázky nemôžu byť cieľmi.
Začnite a ukončite sekvenciu drag-and-drop
Po definovaní vlastnosti draggable="true" na obsahu pripojte dragstart event handler na spustenie DnD sekvencie pre každý stĺpec.
Tento kód nastaví nepriehľadnosť stĺpca na 40 %, keď používateľ začne ťahať, a potom ju na konci udalosti ťahania vráti na 100 %.
Výsledky môžete vidieť v ukážke Glitch nižšie. Ak potiahnete predmet, stane sa nepriehľadným. Keďže udalosť dragstart cieli na zdrojový prvok, nastavenie this.style.opacity na 40 % dáva používateľovi vizuálnu väzbu, že aktuálne vybraný prvok sa pohybuje. Po umiestnení položky sa zdrojový prvok vráti na 100 % nepriehľadnosť, hoci funkcia umiestnenia ešte nie je zapísaná.
Použite dragenter, dragover a dragleave na pridanie ďalších vizuálnych podznakov
Aby ste používateľom pomohli pochopiť, ako interagovať s vaším rozhraním, použite dragenter, dragover a dragleave event handlery. V nasledujúcom príklade je možné stĺpce ťahať alebo cieliť. Aby to používatelia lepšie pochopili, keď používateľ potiahne položku okolo stĺpca, okraj tohto stĺpca sa zmení na prerušovanú čiaru. Napríklad môžete vytvoriť nadtriedu v CSS, ktorá reprezentuje prvok, ktorý je cieľom umiestnenia:
Potom nastavte event handler v JavaScripte, ktorý pridáva overclass pri preťahovaní okolo stĺpca a odstraňuje ho pri odchode. V dragend handleri chceme tiež zabezpečiť, aby bola trieda na konci dragu odstránená.
V tomto kóde je potrebné spomenúť niekoľko bodov:
Pri ťahaní prvku, ako je odkaz, musíte zablokovať predvolené správanie prehliadača, teda prechod na tento odkaz. Na to zavolajte e.preventDefault() v udalosti dragover. Ďalšou dobrou praxou je vrátiť false v tom istom handleri.
Na prepínanie tried použite obsługu udalostí dragenter, nie na presúvanie. Ak použijete dragover, trieda CSS sa prepína viackrát, pretože event dragover sa spúšťa, keď stĺpec visí. Nakoniec to spôsobí, že renderer prehliadača vykoná veľa zbytočnej práce. Najlepšie je vždy minimalizovať prekreslenie. Ak z nejakého dôvodu potrebujete použiť dragover eventy, zvážte obmedzenie alebo odstránenie eventových poslucháčov.
Dokončite umiestnenie
Na riešenie samotného umiestnenia pridajte poslucháč udalostí pre drop event. V drop handleri musíte zablokovať predvolené správanie umiestnenia prehliadača, čo je zvyčajne nejaké otravné presmerovanie. e.stopPropagation() môže byť zavolaný, aby sa zabránilo spusteniu DOM.
Nezabudnite registrovať nového handlera v druhom handleri:
Ak kód spustíte v tomto čase, projekt nebude umiestnený na novom mieste. Na dosiahnutie tohto cieľa je potrebné použiť objekt DataTransfer.
Vlastnosť dataTransfer je miesto, kde sa dejú všetky DnD zázraky. Ukladá dátové fragmenty odoslané v operácii drag. dataTransfer je nastavený v dragstarter udalosti a je čítaný/spracovaný v drop-evente. Zavolajte e.dataTransfer.setData(mimeType, dataPayload) na nastavenie typu MIME a dátového zaťaženia objektu.
V nasledujúcom príklade umožníme používateľom preusporiadať poradie stĺpcov. Na to najprv musíte uložiť HTML zdrojového prvku na začiatok ťahania:
Spravte umiestnenie stĺpcov v udalosti drop, nastavte HTML zdrojového stĺpca na HTML cieľového stĺpca, kde je umiestnený, najprv skontrolujte, či cieľový stĺpec, ktorý používateľ pretiahne a zahodí, je rovnaký ako zdrojový stĺpec.
Viac vlastností odporu
Objekt dataTransfer odhaľuje vlastnosti, ktoré sa používajú na poskytovanie vizuálnej spätnej väzby používateľovi počas procesu ťahania. Tieto vlastnosti môžu byť tiež použité na kontrolu toho, ako každý cieľový objekt reaguje na konkrétne typy dát.
- dataTransfer.effectAllowed obmedzuje "typ dragu", ktorý môže používateľ vykonať na danom prvku. Používa sa v modeli spracovania drag-and-drop na inicializáciu dropEffectu počas udalostí dragenter a dragover. Táto vlastnosť môže byť nastavená na nasledujúce hodnoty: žiadne, kopírovať, kopírovaťLink, kopírovaťPresunúť, link, linkMove, pohybovať, všetky a neinicializované.
- dataTransfer.dropEffect riadi spätnú väzbu poskytovanú používateľovi počas udalostí dragenter a dragover. Keď používateľ prejde nad cieľovým prvkom, kurzor prehliadača ukáže typ akcie, ktorú má vykonať (napr. kopírovať, presunúť a pod.). Efekt môže byť jedna z nasledujúcich hodnôt: žiadne, kopírovať, odkazovať, presunúť.
- e.dataTransfer.setDragImage(imgElement, x, y) označuje, že predvolená "ghost image" spätná väzba prehliadača sa nepoužíva, ale namiesto toho je možnosť nastaviť ikonu ťahania.
Nahrávajte súbory ťahaním a púšťaním
Nasledujúci jednoduchý príklad používa stĺpec ako zdroj ťahania a cieľ ťahania. To je viditeľné v používateľskom rozhraní, keď je používateľ požiadaný o preusporiadanie položiek. V niektorých prípadoch môže byť ťahanie cieľa a ťahanie zdroja odlišné, napríklad v rozhraní, kde používateľ musí vybrať obrázok ako hlavný obrázok produktu tak, že vybraný obrázok pretiahne na cieľ.
Drag and drop sa často používa, aby si používatelia mohli presúvať položky z plochy do aplikácie. Hlavný rozdiel je v drop handlere. Bez použitia dataTransfer.getData() na prístup k súboru budú dáta súboru zahrnuté vo vlastnosti dataTransfer.files:
Pôvodný odkaz:Prihlásenie na hypertextový odkaz je viditeľné.
|
Zverejnené 2022-4-26 10:30:50
|
|
|
|
Zverejnené 2022-4-26 21:27:25
|
