fn
useBlockDrag
Pointer-driven block reordering. No native drag and drop: it cannot be
styled, has no drop indicator, ignores touch on iOS, and a draggable
child inside a contenteditable fights text selection.
Block rects are measured once when the drag begins, relative to the content
root; each frame maps the pointer to a boundary by binary search and adds
the root's current offset, so scrolling needs no re-measure. The dragged
blocks become the node selection for the duration, which is what the
consumer's [data-selected] styling and Escape/Backspace already handle.
Signature
ts
export function useBlockDrag(ctx: WritekitContextValue, options: UseBlockDragOptions ={ ... }Parameters
| Parameter | Type | Description |
|---|---|---|
ctx | WritekitContextValue | — |
options? | UseBlockDragOptions | — |
Returns
UseBlockDragReturn| Property | Type | Description |
|---|---|---|
session | ShallowRef<DragSession | null> | — |
armed | () => boolean | Reactive: a press has been made but not resolved into a drag or a click. |
press | (event: PointerEvent, blockId: string, onClick?: (blockId: string) => void) => void | Begin from a handle's pointerdown. Releasing without travelling past the
threshold calls onClick — the same handle opens a menu on click and
moves the block on drag. |
cancel | () => void | — |