Reorder

Reorder je komponent, ktorý umožňuje pomocou funkcionality Drag&Drop, zmeniť poradie položky ReorderItem v skupine.

Základné použitie

Atribút Disabled

Atribút disabled sa používa na zakázanie možnosti preusporiadania položiek v rámci Reorder. Keď je tento atribút nastavený, používateľ nebude môcť ťahať položky na zmenu ich poradia.

Rukoväť pre ťahanie

Pridaním elementu do slotu handle položky ReorderItem, môžete definovať špecifickú oblasť, ktorá bude slúžiť ako rukoväť pre ťahanie a preusporiadanie položiek. Toto umožňuje používateľom intuitívnejšie interakcie pri zmene poradia položiek.

Atribút Reverse - Opačné poradie

Atribút reverse sa používa na zmenu smeru preusporiadania položiek v rámci Reorder.

Drop Zóny

DropZone je komponent, ktorý predstavuje zónu určenú pre preusporiadanie obsahu.

Kedy použiť

Použite wje-reorder, 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

dragEl

Popis	Ukladá referenciu na prvok, ktorý sa práve ťahá.
Atribút	drag-el
Typ	null
Predvolené	null

items

Popis	Definuje zoznam hodnôt spracovaných vo voľbe items.
Atribút	items
Typ	array
Predvolené	[]

originalIndex

Popis	Ukladá pôvodný index položky pred začiatkom presunu.
Atribút	original-index
Typ	null
Predvolené	null

isDragging

Popis	Určuje, či je voľba is-dragging zapnutá a ovplyvňuje správanie komponentu.
Atribút	is-dragging
Typ	boolean
Predvolené	false

offsetX

Popis	Nastavuje číselnú hodnotu používanú vo voľbe offset-x.
Atribút	offset-x
Typ	number
Predvolené	0

offsetY

Popis	Nastavuje číselnú hodnotu používanú vo voľbe offset-y.
Atribút	offset-y
Typ	number
Predvolené	0

cloneEl

Popis	Ukladá klon prvku použitý ako náhľad pri presúvaní.
Atribút	clone-el
Typ	null
Predvolené	null

Udalosti

Názov	Popis
wje-reorder:change	Vyvolá sa pri zmene hodnoty komponentu.

Metódy

attachEventListeners

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

mouseDown

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

touchStart

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

startDragging

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

mouseMove

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

touchMove

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

moveElement

Popis	Presunie element na novú pozíciu v dátach komponentu.
Signatúra	(pageX: number, pageY: number) => void

mouseUp

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

touchEnd

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

stopDragging

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

dragStart

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

createClone

Popis	Vytvorí clone a pripojí ho do štruktúry komponentu.
Signatúra	() => void

isMovingDown

Popis	Overí, či je moving down aktuálne pravda.
Signatúra	(droppedElement: any) => boolean

dispatchChange

Popis	Vyvolá vlastnú udalosť z kontextu komponentu.
Signatúra	(from: number, to: number, order: Array<number>, orderElements: any) => 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.