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.
| 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 and wrap your content with DragAndDropContainer:
val dragAndDropState = rememberDragAndDropState<String>()
DragAndDropContainer(
state = dragAndDropState,
) {
DraggableItem(
state = dragAndDropState,
key = "item-1",
data = "Hello",
) {
Text("Drag me")
}
Box(
modifier = Modifier
.dropTarget(
key = "target-1",
state = dragAndDropState,
onDrop = { state ->
println("Dropped: ${state.data}")
},
)
) {
Text("Drop here")
}
}
Create a ReorderState and use ReorderableItem which is both draggable and a drop target:
val reorderState = rememberReorderState<String>()
ReorderContainer(
state = reorderState,
) {
LazyColumn {
items(items, key = { it }) { item ->
ReorderableItem(
state = reorderState,
key = item,
data = item,
onDrop = {},
onDragEnter = { state ->
items = items.toMutableList().apply {
val index = indexOf(item)
if (index == -1) return@ReorderableItem
remove(state.data)
add(index, state.data)
}
},
) {
Text(item)
}
}
}
}
Toggle drag and drop at the container level:
DragAndDropContainer(
state = dragAndDropState,
enabled = false,
) { }
Or for a specific item:
DraggableItem(
state = dragAndDropState,
key = "item-1",
data = "Hello",
enabled = false,
) { }
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.