Easily add drag-and-drop functionality to projects. Supports draggable and reorderable items, customizable states, and enabling/disabling features for individual or all items. See sample for implementation details.
A library that allows you to easily add drag and drop functionality to your Jetpack Compose or Compose Multiplatform projects.
Try the live demo · Documentation
| Platform | Supported |
|---|---|
| Android | Yes |
| Kotlin version | Compose version | Compose DND version |
|---|---|---|
| 2.3.20 | 1.10.3 | 0.5.0 |
Add the following dependency to your module build.gradle.kts file:
implementation("com.mohamedrejeb.dnd:compose-dnd:0.5.0")
For Kotlin Multiplatform projects, add the dependency to your commonMain source set:
kotlin {
sourceSets {
commonMain.dependencies {
implementation("com.mohamedrejeb.dnd:compose-dnd:0.5.0")
}
}
}
Create a DragAndDropState, wrap your content with DragAndDropContainer, and use the draggableItem and dropTarget modifiers:
val dragAndDropState = rememberDragAndDropState<String>()
DragAndDropContainer(
state = dragAndDropState,
) {
val isDragging = dragAndDropState.isDragging("item-1")
Text(
text = "Drag me",
modifier = Modifier
.graphicsLayer { alpha = (isDragging) }
.draggableItem(
key = ,
= ,
state = dragAndDropState,
draggableContent = {
Text()
},
),
)
Box(
modifier = Modifier
.dropTarget(
key = ,
state = dragAndDropState,
onDrop = { state ->
println()
},
)
) {
Text()
}
}
The reorderableItem modifier makes an item both draggable and a drop target, which is all a sortable list needs:
val dndState = rememberDragAndDropState<String>()
DragAndDropContainer(
state = dndState,
) {
LazyColumn {
items(items, key = { it }) { item ->
Text(
text = item,
modifier = Modifier
.graphicsLayer { alpha = if (dndState.isDragging(item)) 0f else 1f }
.reorderableItem(
key = item,
data = item,
state = dndState,
onDragEnter = { state ->
items = items.toMutableList().apply {
index = indexOf(item)
(index != -) {
remove(state.)
add(index, state.)
}
}
},
draggableContent = {
Text(item)
},
),
)
}
}
}
Toggle drag and drop at the container level:
DragAndDropContainer(
state = dragAndDropState,
enabled = false,
) { }
Or for a specific item by passing enabled = false to the draggableItem or reorderableItem modifier.
Prefer wrapping composables instead of modifiers? The
DraggableItemandReorderableItemwrapper composables offer the same features - see the documentation.
For more details and advanced features (auto scroll, drop strategies, drag handles, axis lock), check out the documentation and the sample project.
If you've found an error in this library, please file an issue.
Feel free to help out by sending a pull request.
Support it by joining stargazers for this repository.
Also, follow me on GitHub for more libraries!
You can always
Copyright 2023 Mohamed Rejeb
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
http:
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.
| iOS | Yes |
| Desktop | Yes |
| Web (JS) | Yes |
| Web (WASM) | Yes |
Surfaced from shared tags and platforms — no rankings paid for.