Drag and Drop Reordering in Compose - ReorderableLazyList (v2)

#android #kotlin #compose #tutorial

Implement intuitive drag-and-drop reordering in Compose lists. Learn how to use ReorderableLazyList and handle pointer events for smooth interactions.

Basic ReorderableLazyList Setup

Use the reorderable modifier from org.burnoutcrew.reorderable:

val items = remember { mutableStateOf(listOf("Item 1", "Item 2", "Item 3")) }
val reorderState = rememberReorderableLazyListState(
    onMove = { from, to ->
        items.value = items.value.toMutableList().apply {
            add(to.index, removeAt(from.index))
        }
    }
)

LazyColumn(state = reorderState.listState,
    modifier = Modifier.reorderable(reorderState)) {
    items(items.value.size) { index ->
        ReorderableItem(reorderState, key = items.value[index]) {
            Text(items.value[index],
                modifier = Modifier.draggableHandle())
        }
    }
}

Handling Drag State and Visual Feedback

Provide visual feedback during drag operations:

ReorderableItem(
    reorderState = reorderState,
    key = item.id,
    modifier = Modifier.alpha(if (isDragging) 0.5f else 1f)
) {
    Surface(
        modifier = Modifier
            .fillMaxWidth()
            .padding(8.dp)
            .background(
                if (isDragging) Color.LightGray else Color.White
            )
            .draggableHandle(
                onDrag = { offset ->
                    // Handle custom drag behavior
                }
            ),
        shape = RoundedCornerShape(8.dp)
    ) {
        Text(item.name)
    }
}

Custom Drag Behavior with Pointer Events

For advanced control, use pointer events directly:

Modifier
    .pointerInput(Unit) {
        detectDragGesturesAfterLongPress(
            onDrag = { change, offset ->
                change.consume()
                // Update drag position
            },
            onDragEnd = {
                // Finalize reorder
            }
        )
    }