Screen · Productivity

Reorder SwiftUI Screen

A list you reorder by dragging: rows lift, the others part, and the drop settles with a spring.

Drag to reorder outside edit mode: a long press lifts a row with a shadow and a tilt, the rows part to open the gap, a drop indicator tracks the target index, edges auto-scroll, and release settles it with a spring.

  • SwiftUI
  • iOS 17.0+
  • reorder-list
Get SwiftPieces Pro

$199 once, every piece included. See how installing works · Sign in

01

What's included

SwiftUI source you own, built on Apple frameworks only.

  • A long press lifts the row and the others part around it
  • A drop indicator tracks the target index, with edge auto-scroll
  • Reorderable without dragging, through accessibility actions
  • The Reorder screen from the preview: a prioritised task list

02

Implementation notes

How it behaves, what it handles, and the decisions behind it.

Hold a row and it lifts out of the stack, scaling up, tilting slightly and taking a shadow with it. The rows it passes step aside to open a gap, a dashed indicator marks the index it would land at, and releasing settles it there with a spring. Drag into the top or bottom edge of the list and it auto-scrolls a row at a time, carrying the target index along, so a long list can be reordered end to end in one gesture.

Notes

  • This is not .onMove: no List, no edit mode, no EditButton. Rows are your own views and the gesture is a LongPressGesture sequenced before a DragGesture, so a plain tap still reaches whatever is inside the row.
  • Rows are a uniform rowHeight, which is what makes the index math exact: one slot is the row plus the spacing, and the target index is the drag offset rounded to whole slots.
  • The drop is a single transaction. Moving the element and zeroing the drag offset together cancel out, so the row stays exactly where the finger left it and then settles instead of jumping.
  • Auto-scroll counts the slots it has scrolled and adds them to the finger travel, so the lifted row stays under the fingertip while the list moves beneath it.
  • Every row carries "Move up" and "Move down" accessibility actions, a position value ("Position 4 of 5") and a 44pt grip, so the order is reachable without a drag at all.
  • Reduce Motion drops the lift scale and tilt and replaces the springs with ease-outs; haptics are a medium impact on lift, a selection tick per index crossed and a light impact on the drop.
  • Styling comes in through parameters, never the theme: rowHeight, spacing, cornerRadius, liftScale, liftTilt, liftShadow and indicator.
  • ReorderListExample at the end of ReorderList.swift is the screen shown in the preview; copy it as a starting point.