Skip to content
Gestures & Scroll

Draggable

Drag a box along one axis with rememberDraggableState

Modifier.draggable reports drag deltas on a single orientation. Track the accumulated offset in state, clamp it to a range, and apply it with Modifier.offset.

Draggable demos rendered in Compose Playground
Pixel-accurate preview · light theme

Examples

01

Horizontal drag

The handle follows your finger, clamped to a 0..220 dp range.

Kotlin
var offset by remember { mutableFloatStateOf(0f) }
Box(
    Modifier
        .offset { IntOffset(offset.roundToInt(), 0) }
        .size(64.dp)
        .clip(RoundedCornerShape(12.dp))
        .background(MaterialTheme.colorScheme.primary)
        .draggable(
            orientation = Orientation.Horizontal,
            state = rememberDraggableState { delta ->
                offset = (offset + delta).coerceIn(0f, 600f)
            }
        )
)