Drag & Drop prvky s vanilkovým JavaScriptom a HTML

Drag & Drop prvky s vanilkovým JavaScriptom a HTML

Existuje veľa skvelých Knižnice JavaScript na pridanie funkcie drag and drop do vašej aplikácie. Čo možno neviete, je to HTML má vstavané natívne API na vytváranie prvkov v súbore ROZSUDOK ťahateľné a pustiteľné. Tu sa pozrieme na vytvorenie funkcie drag and drop pomocou HTML Drag and Drop API s trochou vanilkového JavaScriptu na nastavenie obsluh udalostí.

Prehľad

Rozhranie API Drag and Drop HTML spolieha na model udalostí modelu DOM, že získava informácie o tom, čo sa presúva alebo púšťa, a aktualizuje tento prvok pri presúvaní. Len s niekoľkými obsluhami udalostí môžete z akéhokoľvek prvku urobiť položku, ktorú je možné ťahať alebo rozbaľovaciu zónu.

Rozhranie API Drag and Drop ponúka viacero možností prispôsobenia akcií, ktoré nie sú iba ťahaním a ťahaním. Môžete napríklad aktualizovať štýl CSS vašich presunutých položiek. Tiež namiesto toho, aby ste položku presunuli, sa môžete rozhodnúť skopírovať položku, ktorú je možné presunúť, tak, aby sa dala replikovať pri páde.

Tu sa zameriame na základy vytvárania vašich funkcií drag and drop JavaScript na priamu aktualizáciu DOM.

Umožnenie pretiahnutia prvkov HTML

Začnime najskôr tým, čo chceme pretiahnuť. Povedzme, že máme kontajner s dvoma druhmi podradených prvkov: deti, ktoré je možné odhodiť, a deti, ktorým môžu prvky vložené do nich. Ak by sme napríklad mali zoznam úloh, mohli by sme svoje úlohy presunúť do oblasti plnenia. (K tomuto príkladu zoznamu úloh sa vrátime na konci.)

Aby to bolo jednoduché, položky, ktoré sa presúvajú, označujeme ako prvky, ktoré je možné ťahať, a cieľ ako rozbaľovaciu zónu.

ťahateľný

dropzone

Náš prvý príklad je predvolený a deti sú nie ťahateľný.

Začnime teda tým, že náš prvok, ktorý sa dá presunúť, explicitne zmeníme na položku. Na to musíme použiť | _+_ | atribút takto:

klon prihlasovacej stránky instagramu

ťahateľný

dropzone

Ak sa teraz pokúsite presunúť ťahateľný prvok myšou (ospravedlňujeme sa mobilným návštevníkom!), Mali by ste vidieť ľahšiu verziu prvku, ktorý sa bude pohybovať pomocou kurzora pri ťahaní.

Bez nastavenia tohto | _+_ | atribút | _+_ |, predvolená hodnota je | _+_ |. To znamená, či je prvok presúvateľný, bude určené predvoleným nastavením vášho prehliadača. Odkazy (| _+_ |), napríklad, sú v predvolenom nastavení spravidla presúvateľné. | _+_ | s však nie sú.

Vytváranie obslužných rutín udalostí drag and drop

V súčasnej dobe, ak pri ťahaní ťahateľného prvku uvoľníme myš, nič sa nestane. Nie veľmi užitočné! Ak chcete skutočne spustiť akciu pri presúvaní myšou, budeme musieť použiť rozhranie Drag and Drop API na minimálne tri udalosti:

• | _+_ |: Nastavte ID ťahaného prvku a vykonajte všetky ďalšie zmeny, ktoré chceme použiť v stave ťahania.
• | _+_ |: Prehliadače v predvolenom nastavení nespúšťajú akcie, keď je prvok, ktorý sa dá presunúť, presunutý. Tu musíme zasiahnuť a umožniť pádové akcie!
• | _+_ |: Tu sa spustí čokoľvek, čo sa má stať pri poklese. Vlečený prvok sa často presunie na nový nadradený prvok v DOM.

Obslužné programy udalostí ondragstart, ondragover, ondrop sú len začiatok. V skutočnosti je ich celkom osem: ondrag, ondragend, ondragenter, ondragexit, ondragleave, ondragover, ondragstart a ondrop.

Rozhranie DataTransfer

The Prenos dát Rozhranie bude sledovať informácie súvisiace s aktuálnym dianím pri ťahaní. Ak chcete aktualizovať náš prvok pri presúvaní myšou, potrebujeme priamy prístup k objektu DataTransfer. Ak to chcete urobiť, môžeme vybrať | _+_ | nehnuteľnosť z našej akcie DOM.

Rozhranie DataTransfer (alebo objekt) môže technicky sledovať informácie o viacerých prvkoch ťahaných súčasne. V našom prípade sa zameriame na ťahanie iba jedného prvku.

Aktualizácia nášho prvku potiahnutím

V tomto ďalšom kroku nastavíme našu funkciu | _+_ |.

V našom | _+_ | funkciu, môžeme vykonať akékoľvek zmeny, ktoré by sme chceli vidieť, akonáhle sa začne ťahanie. Môžete aktualizovať CSS ťahaného prvku, urobiť z presunutej verzie dočasný obrázok a všetko ostatné, na čo si spomeniete, je prístupné prostredníctvom udalosti DOM.

| _+_ | majetok objektu | _+_ | možno použiť na nastavenie informácií o stave ťahania pre váš aktuálne ťahaný prvok. Na to sú potrebné dva parametre: reťazec, ktorý deklaruje formát druhého parametra a aktuálne prenášané údaje.

Našim cieľom je presunúť náš prvok presúvateľný na nového rodiča, takže musíme byť schopní vybrať náš prvok, ktorý je možné presunúť, s jedinečným ID. ID ťahaného prvku môžeme nastaviť pomocou | _+_ | majetok, aby ho bolo možné použiť neskôr takto:

Ak chcete aktualizovať štýl CSS presunutej položky, môžeme k jej štýlom pristupovať znova pomocou udalosti DOM a nastavením štýlov, ktoré chceme pre | _+_ |:

Teraz, keď máme funkciu JavaScript pre začiatok ťahania, môžeme ju presunúť do položky | _+_ | atribút:

pretiahnuteľný = „pravdivý“

ondragstart = 'onDragStart (udalosť);'>

ťahateľný

dropzone

Takto bude ťahanie vyzerať v prípade, že nemáte myš, aby ste si to vyskúšali sami.

Ak sa teraz pokúsite položku presunúť, štýl je deklarovaný v | _+_ | sa uplatní, ale pri poklese sa nič nestane. Prejdeme k našim obslužným programom udalostí dropzone.

strtok vs strtok_r

Povolenie spúšťacích prvkov

Po | _+_ | je našou ďalšou funkciou nastavenia | _+_ |. Ako už bolo uvedené, prehliadaču v predvolenom nastavení bráni akcie pri páde, takže musíme zabrániť prehliadaču, aby zabránil našej akcii pri páde. Dve zabraňujú rovnakému povoleniu, však?

Tu musíme iba zabrániť prehliadaču zasahovať do našej akcie pri páde. Teraz to môžeme pridať do našej dropzone, aby to mohol byť príjemný rodič pre akékoľvek prvky, ktoré je možné presunúť.

Aj keď naša dropzone teraz môže prijímať položky, ktoré je možné presunúť, stále sme nepovedali, čo by sa vlastne malo stať, keď pustíte myš.

Čo robiť pri kvapke

Teraz môžeme predstaviť našu tretiu a poslednú funkciu: | _+_ |.

Naše kroky pre túto funkciu budú nasledujúce:

• Pamätajte si údaje, ktoré sme nastavili pomocou | _+_ |? Teraz musíme tieto údaje získať pomocou | _+_ | objekty | _+_ | nehnuteľnosť. Údaje, ktoré sme nastavili, boli ID, a tak nám budú vrátené.
• Vyberte náš ťahateľný prvok s ID, ktoré sme získali v prvom kroku.
• Vyberte náš prvok dropzone.
• Pripojte náš ťahateľný prvok k dropzone.
• Resetovať naše | _+_ | predmet.

Pretože je to naša tretia a posledná funkcia, ktorú musíme vytvoriť, stačí ju preniesť do atribútu dropdone ondrop. Akonáhle je to hotové, máme dokončenú funkciu drag and drop!

Ak sa chcete dozvedieť viac o všetkom, čo môžete pomocou rozhrania Drag and Drop API spustiť, vyskúšajte si to Dokumenty MDN na to.

Vďaka za prečítanie ❤

platba pomocou aplikácie v hotovosti zlyhala

Ak sa vám tento príspevok páčil, zdieľajte ho/lajkujte ho so všetkými svojimi priateľmi z oblasti programovania!

Sledujte nás na Facebook | Twitter

Ďalšie čítanie

☞ Tutoriál programovania JavaScript - Kompletný kurz JavaScript pre začiatočníkov

☞ Nové funkcie ES2019 by mal vedieť každý vývojár JavaScriptu

☞ Najlepšie rámce, knižnice a nástroje JavaScript, ktoré sa majú použiť v roku 2019

☞ Zjednodušte si JavaScript pomocou .some () a .find ()

☞ Zjednodušte si JavaScript pomocou .map (), .reduce () a .filter ()

#javascript #html

Pozri Tiež:

• Čo je Dink Doink (DINK) | Čo je to token Dink Doink | Čo je to DINK token
• Ako nasadiť aplikácie Vue do AWS | Naučte sa akcie GitHub
• Responzívne preklápacie hodiny v jQuery
• Ako a kde kúpiť token Gulag (GULAG) - jednoduchý sprievodca krok za krokom
• Rozdiel medzi Asyncdata a Fetch