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

Locking handle

By adding the lock attribute to the ReorderHandle element, you can block the ability to drag and drop items, preventing users from reordering 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 need a consistent WebJET-based implementation for this UI concern.

When not to use

Do not stretch the component beyond its responsibility; compose smaller primitives for edge cases.

Accessibility

Validate keyboard behavior, focus states, contrast, and meaningful labels for interactive elements.

Best Practices

• Prefer component APIs over direct DOM manipulation.
• Stick to design tokens and naming conventions.
• Test components with realistic data before production rollout.

Attributes and Properties

dropzone

Description	Controls how dropzone behaves in the component.
Attribute	dropzone
Type	any
Default	-

parent

Description	Controls how parent behaves in the component.
Attribute	parent
Type	any
Default	-

Events

Name	Description
wje-reorder-handle:start	Emitted when the wje-reorder-handle:start event is dispatched.
wje-reorder-handle:change	Emitted when the component value changes.

Methods

startDrag

Description	Handles the attribute changes.
Signature	(e: DragEvent) => void

startTouchDrag

Description	Handles the touch start event.
Signature	(e: TouchEvent) => void

startDragAction

Description	Initiates the drag-and-drop action for a sortable element.
Signature	(clientX: number, clientY: number) => void

getDraggable

Description	Retrieves the closest draggable element based on attribute conditions. If the element has a "parent" attribute, the method attempts to find the closest ancestor matching the CSS selector specified in the attribute. If no such ancestor exists, the method defaults to returning the immediate parent element.
Signature	() => Element｜null

getDropzone

Description	Retrieves the nearest dropzone element based on the element's attributes or its parent element.
Signature	(element: HTMLElement) => HTMLElement｜null

getClosestDropzone

Description	Retrieves the closest dropzone element at the specified coordinates.
Signature	(clientX: number, clientY: number) => HTMLElement｜null

getElementsFromPointAll

Description	Retrieves all elements at the specified coordinates, including those within shadow DOMs.
Signature	(x: number, y: number, root?: Document｜ShadowRoot, visited?: Set<Node>) => HTMLElement[]

reIndexItems

Description	Re-indexes child elements of the given container by setting their dataset index.
Signature	(container: HTMLElement) => void

CSS Shadow Parts

Name	Description
native	The native part of the reorder handle.

CSS Custom Properties

No CSS custom properties available for this component.

Slots

Name	Description
default	The default slot for the reorder handle.