Live demo — this example is server-driven; run the showcase locally for the interactive version.

Drag and drop

Reposition, rearrange, and group items by dragging them — or with the keyboard. Built with pointer events + Alpine.js (the reusable phaDragDrop factory), no library: the held row glides under the pointer and the rest slide via a FLIP transition, like PatternFly's DragDropSort. Reorders can persist to the server via HTMX on drop.

Examples

Basic

Reorder a single list by dragging rows, or focus a row's grip handle and press the up / down arrow keys. The reusable phaDragDrop factory keeps the order.

Multiple drop zones

Drag items between two lists and reorder within each. Dropping on a row inserts before it; dropping on a zone's empty space appends. One factory instance owns both zones.

Backlog

In progress

Sortable data list

A richer PF DataList with a draggable control column. Every reorder POSTs the new order to the server via HTMX, which echoes the saved sequence back — the BFF "persist on drop" contract.

Saved order: Primary nav, Masthead, Sidebar, Footer

Dual list selector

The PF dual list selector, drag-enabled: drag options across panes or reorder within a pane. The arrow buttons move the selected option as the keyboard-accessible path.

Documentation

Drag and drop pattern

There's no runtime template — drag-and-drop is a pattern, not a component. A single reusable Alpine factory, phaDragDrop (web/js/alpine/components/drag-and-drop.js), drives every example on top of PF's Data list / Dual list selector markup.

The contract: the root carries x-data="phaDragDrop()" and a data-lists JSON of { "zone": [{ id, label }] }. Each draggable row carries data-dd-item, data-zone, :data-flip-id="item.id" and wires @pointerdown="onPointerDown(zone, i, $event)"; its zone container carries data-dd-zone. Multiple zones just add more keys.

Why pointer events, not native drag. Like PF's DragDropSort, the held row glides under the pointer (a transform) while the displaced rows slide via a FLIP transition — native HTML5 drag can't do that (it shows a browser drag-image and offers no reorder preview). The factory hit-tests with document.elementFromPoint and commits the order on release.

Usage

Persist on drop. Set data-persist-url on the root and the factory POSTs zone + the comma-joined ids to it via htmx.ajax after every change. The Sortable data list example wires this to /api/htmx/drag-drop-reorder, which echoes the saved order into #dd-persist-status — the server owns the sequence.

Accessibility. Every row has a grip-handle button; focus it and use the up / down arrow keys to reorder without a mouse. Moves are announced through an aria-live region. This is the keyboard alternative the WAI-ARIA drag-and-drop guidance (and PF's own DragDropSort) calls for.

Edit drag-and-drop example on GitHub