# dragReorder

> Pointer-driven reorder for a GridList or Tree row list: turns a pointer press on a row's drag handle into a drag session, tracks the row under the pointer and the computed drop position, and dispatches `ui:reorder` once the pointer releases over a valid target.

```ts
import { dragReorder } from "@sdxc/ui/mixins";
```

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

```ts
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

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

#### Signature

```ts
new ReorderEvent(init: { sourceKey: string; targetKey: string; position: DragSession.Position })
```

#### Properties

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

#### Signature

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

#### Signature

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

#### Signature

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

#### Signature

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

#### Signature

```ts
const DRAG_REORDER_SOURCE_ATTRIBUTE = "data-drag-source"
```