{"id":13822048,"url":"https://github.com/aclassen/ComposeReorderable","last_synced_at":"2025-05-16T15:32:29.045Z","repository":{"id":37092996,"uuid":"384565496","full_name":"aclassen/ComposeReorderable","owner":"aclassen","description":"Enables reordering by drag and drop in Jetpack Compose (Desktop) LazyList \u0026 LazyGrid.","archived":false,"fork":false,"pushed_at":"2024-02-05T18:23:08.000Z","size":2480,"stargazers_count":781,"open_issues_count":45,"forks_count":82,"subscribers_count":8,"default_branch":"main","last_synced_at":"2024-06-28T03:37:21.876Z","etag":null,"topics":["android","compose-desktop","jetpack-compose"],"latest_commit_sha":null,"homepage":"","language":"Kotlin","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/aclassen.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2021-07-09T22:42:22.000Z","updated_at":"2024-06-27T23:00:30.000Z","dependencies_parsed_at":"2024-01-15T15:46:27.458Z","dependency_job_id":"87d9fd05-501c-4444-808a-c0eacda3dad8","html_url":"https://github.com/aclassen/ComposeReorderable","commit_stats":null,"previous_names":[],"tags_count":16,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aclassen%2FComposeReorderable","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aclassen%2FComposeReorderable/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aclassen%2FComposeReorderable/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aclassen%2FComposeReorderable/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/aclassen","download_url":"https://codeload.github.com/aclassen/ComposeReorderable/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":213893315,"owners_count":15653524,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["android","compose-desktop","jetpack-compose"],"created_at":"2024-08-04T08:01:39.883Z","updated_at":"2024-08-04T08:07:35.483Z","avatar_url":"https://github.com/aclassen.png","language":"Kotlin","funding_links":[],"categories":["Kotlin"],"sub_categories":[],"readme":"# Compose LazyList/Grid reorder\n[![Latest release](https://img.shields.io/github/v/release/aclassen/ComposeReorderable?color=brightgreen\u0026label=latest%20release)](https://github.com/aclassen/ComposeReorderable/releases/latest)\n\nA Jetpack Compose (Android + Desktop) modifier enabling reordering by drag and drop in a LazyList and LazyGrid.\n\n![Sample](readme/sample.gif)\n\n## Download\n\n```\ndependencies {\n    implementation(\"org.burnoutcrew.composereorderable:reorderable:\u003clatest_version\u003e\")\n}\n```\n\n## How to use\n\n- Create a reorderable state by  `rememberReorderableLazyListState` for LazyList or `rememberReorderableLazyGridState` for LazyGrid\n- Add the `reorderable(state)` modifier to your list/grid\n- Inside the list/grid itemscope create a `ReorderableItem(state, key = )` for a keyed lists or `ReorderableItem(state, index = )` for a indexed only list. (Animated items only work with keyed lists)\n- Apply the `detectReorderAfterLongPress(state)` or `detectReorder(state)` modifier to the list.\nIf only a drag handle is needed apply the detect modifier to any child composable inside the item layout.\n\n`ReorderableItem` provides the item dragging state, use this to apply elevation , scale etc.\n\n```kotlin\n@Composable\nfun VerticalReorderList() {\n    val data = remember { mutableStateOf(List(100) { \"Item $it\" }) }\n    val state = rememberReorderableLazyListState(onMove = { from, to -\u003e\n        data.value = data.value.toMutableList().apply {\n            add(to.index, removeAt(from.index))\n        }\n    })\n    LazyColumn(\n        state = state.listState,\n        modifier = Modifier\n        .reorderable(state)\n        .detectReorderAfterLongPress(state)\n    ) {\n        items(data.value, { it }) { item -\u003e\n            ReorderableItem(state, key = item) { isDragging -\u003e\n                val elevation = animateDpAsState(if (isDragging) 16.dp else 0.dp)\n                Column(\n                    modifier = Modifier\n                        .shadow(elevation.value)\n                        .background(MaterialTheme.colors.surface)\n                ) {\n                    Text(item)\n                }\n            }\n        }\n    }\n}\n\n```\nThe item placement and drag cancelled animation can be changed or disabled by `dragCancelledAnimation` and `defaultDraggingModifier`\n\n```kotlin\n@Composable\nfun VerticalReorderGrid() {\n    val data = remember { mutableStateOf(List(100) { \"Item $it\" }) }\n    val state = rememberReorderableLazyGridState(dragCancelledAnimation = NoDragCancelledAnimation(),\n        onMove = { from, to -\u003e\n            data.value = data.value.toMutableList().apply {\n                add(to.index, removeAt(from.index))\n            }\n        })\n    LazyVerticalGrid(\n        columns = GridCells.Fixed(4),\n        state = state.gridState,\n        modifier = Modifier.reorderable(state)\n    ) {\n        items(data.value, { it }) { item -\u003e\n            ReorderableItem(state, key = item, defaultDraggingModifier = Modifier) { isDragging -\u003e\n                Box(\n                    modifier = Modifier\n                        .aspectRatio(1f)\n                        .background(MaterialTheme.colors.surface)\n                ) {\n                    Text(text = item,\n                         modifier = Modifier.detectReorderAfterLongPress(state)\n                    )\n                }\n            }\n        }\n    }\n}\n```\n\nCheck out the sample app for different implementation samples.\n\n## Notes\n\nIt's a known issue that the first visible item does not animate. \n\n## License\n\n```\nCopyright 2022 André Claßen\n\nLicensed under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License.\nYou may obtain a copy of the License at\n\n    https://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software\ndistributed under the License is distributed on an \"AS IS\" BASIS,\nWITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\nSee the License for the specific language governing permissions and\nlimitations under the License.\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faclassen%2FComposeReorderable","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Faclassen%2FComposeReorderable","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faclassen%2FComposeReorderable/lists"}