Reorder is a component that allows you to use the Drag&Drop functionality to reorder the ReorderItem items in a group.
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.
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 changing the order of items.
The reverse attribute is used to change the direction of reordering items within a Reorder.
DropZone is a component that represents a zone intended for rearranging content.
Use wje-reorder when you need a consistent WebJET-based implementation for this UI concern.
Do not stretch the component beyond its responsibility; compose smaller primitives for edge cases.
Validate keyboard behavior, focus states, contrast, and meaningful labels for interactive elements.
- Prefer component APIs over direct DOM manipulation.
- Stick to design tokens and naming conventions.
- Test components with realistic data before production rollout.
| Description | Stores a reference to the element currently being dragged. |
| Attribute | drag-el |
| Type | null |
| Default | null |
| Description | Controls item selection behavior for items. |
| Attribute | items |
| Type | array |
| Default | [] |
| Description | Stores the original index before reordering starts. |
| Attribute | original-index |
| Type | null |
| Default | null |
| Description | Controls whether is-dragging is enabled and affects component behavior. |
| Attribute | is-dragging |
| Type | boolean |
| Default | false |
| Description | Sets the numeric value used for offset-x. |
| Attribute | offset-x |
| Type | number |
| Default | 0 |
| Description | Sets the numeric value used for offset-y. |
| Attribute | offset-y |
| Type | number |
| Default | 0 |
| Description | Stores a clone used as a drag preview while reordering. |
| Attribute | clone-el |
| Type | null |
| Default | null |
| Name | Description |
|---|
wje-reorder:change | Event fired when the reorder is changed. |
| Description | Attaches event listeners to the element. |
| Signature | (element: any) => void |
| Description | Handles the mouse down event. |
| Signature | (e: object) => void |
| Description | Handles the touch start event. |
| Signature | (e: any) => void |
| Description | Initializes the dragging process for a reorderable item. |
| Signature | (clientX: number, clientY: number, target: HTMLElement) => void |
| Description | Handles the mouse move event. |
| Signature | (e: any) => void |
| Description | Handles the touchmove event and updates the position of the dragged element. |
| Signature | (e: TouchEvent) => void |
| Description | Updates the position of the dragged element and handles reordering logic based on the mouse position. |
| Signature | (pageX: number, pageY: number) => void |
| Description | Handles the mouse up event. |
| Signature | () => void |
| Description | Handles the touch end event. |
| Signature | () => void |
| Description | Stops dragging the element. |
| Signature | () => void |
| Description | Prevents the default behavior of the dragstart event. |
| Signature | (e: DragEvent) => void |
| Description | Creates a clone of the element. |
| Signature | () => void |
| Description | Checks if the dragged element is moving down. |
| Signature | (droppedElement: any) => boolean |
| Description | Dispatches a custom event to signal that a reordering operation has occurred. |
| Signature | (from: number, to: number, order: Array<number>, orderElements: any) => void |
| Name | Description |
|---|
native | The native part of the reorder. |
No CSS custom properties available for this component.
| Name | Description |
|---|
default | The default slot for the reorder. |