RE: Pickup and move which is referenced here: <htt...

# compose

[enighma]

RE: Pickup and move which is referenced here: https://m3.material.io/foundations/interaction/gestures#af76950f-a24c-43bd-bfcd-a9eb15768142

Is there an example of how to achieve this with a custom layout? or not custom too I guess.

The layout and placement is pretty straightforward but I'm looking for resources on how to handle intermediate states like dragging a composable from one location to settle in another.

[Nitesh Singh]

@Composable
fun DraggableBox() {
val boxSize = 100.dp
val scope = rememberCoroutineScope()

val offsetX = remember { Animatable(0f) }
val offsetY = remember { Animatable(0f) }

Box(
modifier = Modifier
.fillMaxSize()
.background(Color.LightGray)
.pointerInput(Unit) {
detectDragGestures(
onDragEnd = {
// Snap to nearest corner or target location
scope.launch {
offsetX.animateTo(300f)
offsetY.animateTo(500f)
}
},
onDrag = { change, dragAmount ->
change.consume()
scope.launch {
offsetX.snapTo(offsetX.value + dragAmount.x)
offsetY.snapTo(offsetY.value + dragAmount.y)
}
}
)
}
) {
Box(
modifier = Modifier
.offset { IntOffset(offsetX.value.roundToInt(), offsetY.value.roundToInt()) }
.size(boxSize)
.background(Color.Blue, RoundedCornerShape(8.dp))
)
}
}

[enighma]

Thanks for sharing. I guess the harder part is how you can find the target location when you're let's say dragging between two columns or have a custom layout. If it helps I could share my custom layout.

[Nitesh Singh]

yes please for batter idea

[Nitesh Singh]

Option 1

Modifier.pointerInput(Unit) {
detectDragGestures { change, dragAmount ->
val position = change.position
// Use position to determine target column
}
}
Option 2
val isInside = layoutCoordinates.value?.boundsInWindow()?.contains(position) == true

option 3
Modifier.animateBounds(lookaheadScope)
val layoutCoordinates = remember { mutableStateOf<LayoutCoordinates?>(null) }

Box(
Modifier
.onGloballyPositioned { coordinates ->
layoutCoordinates.value = coordinates
}
)