Skip to content

Swap thresholds

The swap zone is the part of an item that, when dragged over, makes the dragged item swap places with it. SwapThreshold sets how much of the item (from the centre out) is an active swap zone - the rest is a "dead zone" that does not trigger a swap. InvertSwap moves the active zones to the item's edges instead, giving a "sort between items" feel, and InvertedSwapThreshold sets their size. The shaded bands show the active zones as you move the sliders. This mirrors the SortableJS thresholds demo.

Vertical list
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Grid
1
2
3
4
5
6
7
8
9

List: Item 1, Item 2, Item 3, Item 4, Item 5, Item 6

Grid: 1, 2, 3, 4, 5, 6, 7, 8, 9

An unhandled error has occurred. Reload 🗙