Reorder

Reorder is a component that allows you to use the Drag&Drop functionality to reorder the ReorderItem items in a group.

Basic usage

The sample represents basic moving of items in a single list without additional restrictions or drop zones.

Attribute Disabled

The disabled attribute is used to disable the ability to reorder items within a Reorder. When this attribute is set, the user will not be able to drag items to change their order.

Handle for pulling

By adding an item to the handle slot of the ReorderItem item, you can define a specific area that will serve as a handle for dragging and rearranging items. This allows users to interact more intuitively when reordering items.

Attribute Reverse - Reverse order

The reverse attribute is used to change the direction of reordering items within a Reorder.

Drop Zones

DropZone is a component that represents a zone intended for rearranging content.

When to use

Use wje-reorder when you want to solve a given UI problem consistently within the WebJET design system.

When not to use

Do not use a component outside of its responsibility; in an atypical case, prefer to assemble multiple smaller components.

Accessibility

Check keyboard controls, focus states, contrast and clear naming of interactive elements.

Recommended practices

• Prefer API component over manual DOM interventions.
• Stick to design tokens and consistent naming conventions.
• Before deployment, test the component in real data scenarios.

Attributes and properties

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

Events

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

Methods

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 shadow parts

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

CSS custom variables

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

Slots

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