Reorder Handle

ReorderHandle je element, ktorý pridáva iným elementom funkcionalitu drag-and-drop, a slúži ako rukoväť na presúvanie položiek v skupine elementov.

Základné použitie

Ukážka zobrazuje reorder handle v najjednoduchšej podobe, teda ako vizuálny úchop pre presúvanie položky.

Zamykanie rukoväte

Pridaním atribútu lock na element ReorderHandle, môžete zablokovať možnosť ťahania položky, čím sa zabráni používateľom v zmene poradia položiek.

Bez dropzóny (Pre použitie v menu)

Prvky môžu byť presúvané v rámci ich rodičovského kontajnera bez potreby explicitne definovať dropzone atribút, čím sa zjednodušuje implementácia funkcionality drag-and-drop.

Kedy použiť

Použite wje-reorder-handle, keď chcete riešiť daný UI problém konzistentne v rámci WebJET dizajn systému.

Kedy nepoužiť

Nepoužívajte komponent mimo jeho zodpovednosti; pri netypickom prípade radšej zložte viac menších prvkov.

Prístupnosť

Skontrolujte klávesnicové ovládanie, focus stavy, kontrast a zrozumiteľné pomenovanie interaktívnych prvkov.

Odporúčané postupy

• Preferujte API komponentu pred ručnými DOM zásahmi.
• Držte sa dizajnových tokenov a konzistentných konvencií pomenovania.
• Pred nasadením otestujte komponent v reálnych dátových scenároch.

Atribúty a vlastnosti

dropzone

Popis	Riadi správanie voľby dropzone v komponente.
Atribút	dropzone
Typ	any
Predvolené	-

parent

Popis	Riadi správanie voľby parent v komponente.
Atribút	parent
Typ	any
Predvolené	-

Udalosti

Názov	Popis
wje-reorder-handle:start	Vyvolá sa pri odoslaní udalosti wje-reorder-handle:start.
wje-reorder-handle:change	Vyvolá sa pri zmene hodnoty komponentu.

Metódy

startDrag

Popis	Spustí metódu startDrag na vykonanie logiky komponentu a aktualizáciu jeho stavu.
Signatúra	(e: DragEvent) => void

startTouchDrag

Popis	Spustí metódu startTouchDrag na vykonanie logiky komponentu a aktualizáciu jeho stavu.
Signatúra	(e: TouchEvent) => void

startDragAction

Popis	Spustí metódu startDragAction na vykonanie logiky komponentu a aktualizáciu jeho stavu.
Signatúra	(clientX: number, clientY: number) => void

getDraggable

Popis	Vráti draggable z aktuálneho stavu komponentu.
Signatúra	() => Element｜null

getDropzone

Popis	Vráti dropzone z aktuálneho stavu komponentu.
Signatúra	(element: HTMLElement) => HTMLElement｜null

getClosestDropzone

Popis	Vráti closest dropzone z aktuálneho stavu komponentu.
Signatúra	(clientX: number, clientY: number) => HTMLElement｜null

getElementsFromPointAll

Popis	Vráti elements from point všetky z aktuálneho stavu komponentu.
Signatúra	(x: number, y: number, root?: Document｜ShadowRoot, visited?: Set<Node>) => HTMLElement[]

reIndexItems

Popis	Spustí metódu reIndexItems na vykonanie logiky komponentu a aktualizáciu jeho stavu.
Signatúra	(container: HTMLElement) => void

CSS tieňové časti

Názov	Popis
native	Štýluje koreňovú shadow časť komponentu.

CSS vlastné premenné

Pre tento komponent nie sú dostupné žiadne vlastné CSS vlastnosti.

Sloty

Názov	Popis
default	Predvolený slot pre hlavný obsah komponentu.