DenseSpanGrid
A drag-and-drop reorderable grid component for Compose Multiplatform. Supports multi-span items, dense packing, and multiple reorder modes.
Targets: Android, iOS (arm64 / simulatorArm64), Desktop (JVM)
Features
- Long-press drag-and-drop reordering
- Multi-span items (rowSpan / colSpan)
- Dense packing and order-preserving layout modes
- Four reorder modes: SwapOnHover, SwapOnDrop, InsertOnHover, InsertOnDrop
- Animated item transitions
- Auto-scroll near viewport edges
- Configurable column count, spacing, row height, and content padding
Installation
Add the dependency to your build.gradle.kts:
dependencies {
implementation("com.devpulsar.ui:densespangrid:1.0.1")
}
Quick Start
@Composable
fun MyGrid() {
var items by remember { mutableStateOf(listOf("A", "B", "C", "D", )) }
DenseSpanGrid(
items = items,
columns = ,
modifier = Modifier.fillMaxSize(),
key = { it },
onMove = { from, to ->
items = items.toMutableList().apply {
add(to, removeAt(from))
}
}
) { item, isDragging ->
Card(
modifier = Modifier.fillMaxSize(),
elevation = (isDragging) dp dp
) {
Text(item, modifier = Modifier.padding(dp))
}
}
}
Multi-Span Items
Items can span multiple rows and columns using GridSpan:
API Reference
DenseSpanGrid
PackingMode
| Mode | Description |
|---|
Dense | Fills gaps by placing items in the first available slot |
PreserveOrder | Places items sequentially, preserving list order |
ReorderMode
Building
./gradlew :library:build
./gradlew :library:desktopTest
./gradlew :sample:run
License
This project is licensed under the MIT License.