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
$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: noList, no edit mode, noEditButton. Rows are your own views and the gesture is aLongPressGesturesequenced before aDragGesture, 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,liftShadowandindicator. ReorderListExampleat the end ofReorderList.swiftis the screen shown in the preview; copy it as a starting point.
03
Keep building
Pieces that work well next to this one.