[ @sdxc/ui/mixins ]
dragReorder
Pointer-driven reorder for a GridList or Tree row list.
import { dragReorder } from "@sdxc/ui/mixins";Usage
Adds pointer-driven reorder to a row-list host: a press on a
DRAG_REORDER_HANDLE_ATTRIBUTE element starts session on its
row, and releasing over a valid target dispatches ReorderEvent.
Signature
dragReorder(session: DragSession): MixinDescriptor<HTMLElement>Parameters
| Parameter | Type | Description |
|---|---|---|
session | DragSession | Drag session already constructed by the consumer, shared with any drop zone or drop indicator observing the same drag. |
Examples
let session = new DragSession();
<ul mix={[dragReorder(session)]} on={{ "ui:reorder": (event) => moveRow(event.sourceKey, event.targetKey, event.position) }}>
{rows.map((row) => (
<li key={row.id} data-rmx-key={row.id}>
<button data-drag-handle aria-label={row.dragHandleLabel}>::</button>
{row.label}
</li>
))}
</ul>Used with it
The events, constants and types its module publishes, each imported from @sdxc/ui/mixins too.
ReorderEvent
Dispatched on a row-list host by dragReorder once a drag session commits a drop, carrying the dragged row's key, the target row's key, and the resolved position, so a consumer can move data and re-render.
new ReorderEvent(init: { sourceKey: string; targetKey: string; position: DragSession.Position })| Property | Type | Description |
|---|---|---|
sourceKey | readonly string | Key of the row that was dragged. |
targetKey | readonly string | Key of the row the dragged row was dropped against. |
position | readonly DragSession.Position | Position of the drop relative to the target row. |
DRAG_REORDER_ROW_ATTRIBUTE
Attribute every reorderable row carries its stable identity on, read by dragReorder to resolve the row under the pointer and shared by other mixins on the same rows for their own row lookups.
const DRAG_REORDER_ROW_ATTRIBUTE = "data-rmx-key"DRAG_REORDER_HANDLE_ATTRIBUTE
Attribute a row's drag handle element carries; a drag session only starts from a pointer press that originates on this attribute, so a row's other interactive content keeps its ordinary pointer behavior.
const DRAG_REORDER_HANDLE_ATTRIBUTE = "data-drag-handle"DRAG_REORDER_NESTABLE_ATTRIBUTE
Attribute a row carries to accept an "on" drop nesting the dragged row inside it, on top of the "before"/"after" positions every row accepts; a Tree branch row carries it, other rows resolve only to those two.
const DRAG_REORDER_NESTABLE_ATTRIBUTE = "data-drop-nestable"DRAG_REORDER_POSITION_ATTRIBUTE
Attribute dragReorder writes on the row tracked as the drop target, set to the current DragSession.Position, for a row's own styles or a nested drop-indicator part to render the pending drop.
const DRAG_REORDER_POSITION_ATTRIBUTE = "data-drop-position"DRAG_REORDER_SOURCE_ATTRIBUTE
Attribute dragReorder() sets on the row currently being dragged, for as
long as its session stays active, so its styles can fade or outline it
distinctly from the rest of the list.
const DRAG_REORDER_SOURCE_ATTRIBUTE = "data-drag-source"