shadow
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.
| Description | If true, rearrangement is disabled. |
| Attribute | disabled |
| Type | boolean |
| Default | false |
| Description | If true, the direction of rearrangement is reversed (bottom-up). |
| Attribute | reverse |
| Type | boolean |
| Default | false |
| Name | Description |
|---|
wje-reorder:change | Invoked when changing the order of elements. |
| Description | Connects event listeners to the element. |
| Signature | attachEventListeners(element) => void |
| Description | Initializes the pull process for the reorderable element. |
| Signature | startDragging(clientX, clientY, target) => void |
| Description | Updates the position of the dragged element and manages the reordering logic based on the mouse position. |
| Signature | moveElement(pageX, pageY) => void |
| Description | Stops the element from dragging. |
| Signature | stopDragging() => void |
| Description | Transmits a custom event signaling that a rearrangement has occurred. |
| Signature | dispatchChange(from, to, order) => void |
| Name | Description |
|---|
native | The native part of the reorder component, containing the slot. |
| Name | Description |
|---|
--flex-direction | Direction of flexbox for container |
| Name | Description |
|---|
| `` | The default location of the element content. This includes elements of type wje-reorder-item. |