Enables drag-and-drop reordering in LazyList and LazyGrid components. Provides customizable animations for item placement and drag cancellation, with support for both keyed and indexed lists.
A Jetpack Compose (Android + Desktop) modifier enabling reordering by drag and drop in a LazyList and LazyGrid.
dependencies {
implementation("org.burnoutcrew.composereorderable:reorderable:<latest_version>")
}
rememberReorderableLazyListState for LazyList or rememberReorderableLazyGridState for LazyGridReorderableItem provides the item dragging state, use this to apply elevation , scale etc.
@Composable
fun VerticalReorderList {
= remember { mutableStateOf(List() { }) }
state = rememberReorderableLazyListState(onMove = { from, to ->
.value = .value.toMutableList().apply {
add(to.index, removeAt(from.index))
}
})
LazyColumn(
state = state.listState,
modifier = Modifier
.reorderable(state)
.detectReorderAfterLongPress(state)
) {
items(.value, { it }) { item ->
ReorderableItem(state, key = item) { isDragging ->
elevation = animateDpAsState( (isDragging) dp dp)
Column(
modifier = Modifier
.shadow(elevation.value)
.background(MaterialTheme.colors.surface)
) {
Text(item)
}
}
}
}
}
The item placement and drag cancelled animation can be changed or disabled by dragCancelledAnimation and defaultDraggingModifier
@Composable
fun VerticalReorderGrid() {
val = remember { mutableStateOf(List() { }) }
state = rememberReorderableLazyGridState(dragCancelledAnimation = NoDragCancelledAnimation(),
onMove = { from, to ->
.value = .value.toMutableList().apply {
add(to.index, removeAt(from.index))
}
})
LazyVerticalGrid(
columns = GridCells.Fixed(),
state = state.gridState,
modifier = Modifier.reorderable(state)
) {
items(.value, { it }) { item ->
ReorderableItem(state, key = item, defaultDraggingModifier = Modifier) { isDragging ->
Box(
modifier = Modifier
.aspectRatio()
.background(MaterialTheme.colors.surface)
) {
Text(text = item,
modifier = Modifier.detectReorderAfterLongPress(state)
)
}
}
}
}
}
Check out the sample app for different implementation samples.
It's a known issue that the first visible item does not animate.
Copyright 2022 André Claßen
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance the License.
You may obtain a copy of the License at
https:
Unless applicable law agreed to writing, software
distributed under the License distributed an BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express implied.
See the License the specific language governing permissions
limitations under the License.
reorderable(state) modifier to your list/gridReorderableItem(state, key = ) for a keyed lists or ReorderableItem(state, index = ) for a indexed only list. (Animated items only work with keyed lists)detectReorderAfterLongPress(state) or detectReorder(state) modifier to the list.
If only a drag handle is needed apply the detect modifier to any child composable inside the item layout.Surfaced from shared tags and platforms — no rankings paid for.