Sortable

A drag-to-reorder wrapper for lists and rows, with a Move menu on each handle for keyboard and screen reader users.

Import

import { Sortable } from '@oztix/roadie-components/sortable'

Examples

Default

Wrap a List in Sortable and give each List.Item a value. The row takes a drag handle in front. Pass the values in order as items, and store the new order in onReorder. Drag a handle to move its row, or click it to open the Move menu. The drag preview is the browser's own snapshot of the row.

function Columns() {
  const names = {
    date: 'Date',
    event: 'Event',
    sku: 'SKU',
    price: 'Price',

Variants

Set orientation='horizontal' for items in a row. Drops land on the left or right edge, and the menu moves items left and right, or to the start and end.

function Stages() {
  const [order, setOrder] = useState(['Doors', 'Support', 'Headliner', 'Encore'])
  return (
    <Sortable items={order} onReorder={setOrder} orientation='horizontal' label='running order'>
      <div className='flex flex-wrap gap-2'>
        {order.map((value) => (

States

disabled on Sortable turns off dragging and the Move menu for every item. disabled on one Sortable.Item stops that item being dragged or moved from its own menu; other items can still move past it. A List.Item has no per-row disabled, so build a row you need to hold back with Sortable.Item.

function Columns() {
  const [order, setOrder] = useState(['Event', 'Date', 'SKU'])
  return (
    <div className='grid gap-4'>
      <div className='grid gap-2'>
        <p className='text-sm text-subtle'>Disabled</p>

Composition

Sortable.Item renders a <div> by default. Pass render to swap the element, such as <li /> inside your own list, and put a Sortable.Handle anywhere inside it. Each item sets data-dragging while it is dragged and data-drop-edge (top, bottom, left or right) while it is the drop target, for your own styling; the dimmed item and the accent drop line are built in. Give each item a label so the handle and menu can name it: "Reorder Sydney", "Move Sydney up".

function Cities() {
  const [order, setOrder] = useState(['Brisbane', 'Sydney', 'Melbourne', 'Perth'])
  return (
    <Sortable items={order} onReorder={setOrder} label='tour stops'>
      <ol className='grid gap-2'>
        {order.map((value) => (

With a popover

Drag and drop works inside a modal Popover. A long list scrolls by itself while you drag near its top or bottom edge.

function ColumnSettings() {
  const [order, setOrder] = useState(
    Array.from({ length: 12 }, (_, index) => `Column ${index + 1}`)
  )
  return (
    <Popover modal>

Guidelines

<Sortable items={order} onReorder={setOrder} label='columns'>
  <List>
    {order.map((value) => (
      <List.Item key={value} value={value} title={names[value]} />
    ))}
  </List>

<List>
  <Sortable items={order} onReorder={setOrder}>
    {order.map((value, index) => (
      <List.Item key={index} value={value} title={value} />
    ))}
  </Sortable>

<Sortable label='columns' …>
  <Sortable.Item value='sku' label='SKU'>…</Sortable.Item>
</Sortable>

<Sortable.Item value='sku'>
  <SkuIcon />
</Sortable.Item>

<List.Item value='sku' title='SKU' trailing={<Toggle … />} />

<List.Item value='sku' title={<input … />} />

Accessibility

• Keyboard and screen readers: there is no keyboard dragging. The handle is a menu button. Enter or Space opens the Move menu, and moves past the ends are disabled. After a move, focus returns to the moved item's handle.
• Announcements: every move, by menu or by drag, is announced in a polite live region: "SKU moved to position 3 of 7 columns".
• Pointer: a press on the handle that turns into a drag never opens the menu. A click without a drag does.
• Motion: the dragged item fades without a transition when reduced motion is on. In forced colours the drop line uses the system highlight colour.