Reorder Handle

The ReorderHandle is an element that adds drag-and-drop functionality to other elements, and serves as a handle for moving items in a group of elements.

Basic use

The sample shows the reorder handle in its simplest form, as a visual grip for moving an item.

Locking handle

By adding the lock attribute to the ReorderHandle element, you can block the ability to drag an item, preventing users from changing the order of items.

Without dropzone (For use in menus)

Elements can be moved within their parent container without the need to explicitly define a dropzone attribute, simplifying the implementation of drag-and-drop functionality.

When to use

Use wje-reorder-handle 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

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é	-

Events

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.

Methods

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 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.