{"id":29604317,"url":"https://github.com/mohamedrejeb/compose-dnd","last_synced_at":"2025-07-20T15:06:19.087Z","repository":{"id":214444862,"uuid":"613391859","full_name":"MohamedRejeb/compose-dnd","owner":"MohamedRejeb","description":"Compose DND is a library that allows you to easily add drag and drop functionality to your Jetpack Compose or Compose Multiplatform projects.","archived":false,"fork":false,"pushed_at":"2024-10-13T14:49:53.000Z","size":508,"stargazers_count":361,"open_issues_count":4,"forks_count":14,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-04-24T14:44:48.253Z","etag":null,"topics":["android","android-library","compose","compose-library","compose-multiplatform","compose-multiplatform-library","compose-ui","dnd","drag","drag-and-drop","drag-drop","draggable","jetpack-compose","kotlin","kotlin-android","kotlin-multiplatform"],"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/MohamedRejeb.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2023-03-13T13:37:10.000Z","updated_at":"2025-04-17T04:20:26.000Z","dependencies_parsed_at":"2024-01-17T03:16:15.269Z","dependency_job_id":"9299da30-700d-420f-84ef-333b6282f356","html_url":"https://github.com/MohamedRejeb/compose-dnd","commit_stats":null,"previous_names":["mohamedrejeb/compose-dnd"],"tags_count":3,"template":false,"template_full_name":null,"purl":"pkg:github/MohamedRejeb/compose-dnd","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MohamedRejeb%2Fcompose-dnd","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MohamedRejeb%2Fcompose-dnd/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MohamedRejeb%2Fcompose-dnd/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MohamedRejeb%2Fcompose-dnd/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/MohamedRejeb","download_url":"https://codeload.github.com/MohamedRejeb/compose-dnd/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MohamedRejeb%2Fcompose-dnd/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":266144139,"owners_count":23883119,"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","android-library","compose","compose-library","compose-multiplatform","compose-multiplatform-library","compose-ui","dnd","drag","drag-and-drop","drag-drop","draggable","jetpack-compose","kotlin","kotlin-android","kotlin-multiplatform"],"created_at":"2025-07-20T15:06:17.094Z","updated_at":"2025-07-20T15:06:19.074Z","avatar_url":"https://github.com/MohamedRejeb.png","language":"Kotlin","funding_links":["https://www.buymeacoffee.com/MohamedRejeb","https://img.buymeacoffee.com/button-api/?text=Buy"],"categories":[],"sub_categories":[],"readme":"# Compose Drag And Drop\n\nCompose DND is a library that allows you to easily add drag and drop functionality to your Jetpack Compose or Compose Multiplatform projects.\n\n\n[![Kotlin](https://img.shields.io/badge/kotlin-1.9.22-blue.svg?logo=kotlin)](http://kotlinlang.org)\n[![MohamedRejeb](https://raw.githubusercontent.com/MohamedRejeb/MohamedRejeb/main/badges/mohamedrejeb.svg)](https://github.com/MohamedRejeb)\n[![Apache-2.0](https://img.shields.io/badge/License-Apache%202.0-green.svg)](https://opensource.org/licenses/Apache-2.0)\n[![BuildPassing](https://shields.io/badge/build-passing-brightgreen)](https://github.com/MohamedRejeb/compose-dnd/actions)\n[![Maven Central](https://img.shields.io/maven-central/v/com.mohamedrejeb.dnd/compose-dnd)](https://search.maven.org/search?q=g:%22com.mohamedrejeb.dnd%22%20AND%20a:%compose-dnd%22)\n\n![Compose DND thumbnail](docs/images/thumbnail.png)\n\n## Installation\n\n[![Maven Central](https://img.shields.io/maven-central/v/com.mohamedrejeb.dnd/compose-dnd)](https://search.maven.org/search?q=g:%22com.mohamedrejeb.dnd%22%20AND%20a:%compose-dnd%22)\n\nAdd the following dependency to your module `build.gradle.kts` file:\n\n```kotlin\nimplementation(\"com.mohamedrejeb.dnd:compose-dnd:0.3.0\")\n```\n\n## Usage\n\n### Drag and Drop\n\nTo implement drag and drop functionality:\n- Create a `DragAndDropState` with `rememberDragAndDropState`.\n\n```kotlin\nval dragAndDropState = rememberDragAndDropState()\n```\n\u003cbr\u003e\n\n- Add `DragAndDropContainer` composable which will wrap the draggable items.\n\n```kotlin\nDragAndDropContainer(\n    state = dragAndDropState,\n) {\n\n}\n```\n\u003cbr\u003e\n\n- Add `DraggableItem` composable for each draggable item.\n\n```kotlin\nDraggableItem(\n    state = dragAndDropState,\n    key = task.id, // Unique key for each draggable item\n    data = task, // Data to be passed to the drop target\n) {\n\n}\n```\n\u003cbr\u003e\n\n- Add `Modifier.dropTarget` for each drop target.\n\n```kotlin\nModifier.dropTarget(\n    state = dragAndDropState,\n    key = task.id, // Unique key for each drop target\n    onDrop = { state -\u003e // Data passed from the draggable item\n        // Handle drop\n    }\n)\n```\n\n\u003e For more details, check out the [sample](https://github.com/MohamedRejeb/compose-dnd/tree/main/sample/common/src/commonMain/kotlin)\n\n### Reorder List\n\nTo implement reorder list functionality:\n\n- Create a `ReorderState` with `rememberReorderState`.\n\n```kotlin\nval reorderState = rememberReorderState()\n```\n\u003cbr\u003e\n\n- Add `ReorderContainer` composable which will wrap the reorderable items.\n\n```kotlin\nReorderContainer(\n    state = reorderState,\n) {\n\n}\n```\n\u003cbr\u003e\n\n- Add `ReorderableItem` composable for each reorderable item.\n\n```kotlin\nReorderableItem(\n    state = reorderState,\n    key = task.id, // Unique key for each reorderable item\n    data = task, // Data to be passed to the drop target\n    onDrop = { state -\u003e // Data passed from the draggable item\n        // Handle drop\n    }\n) {\n\n}\n```\n\nThe `ReorderableItem` composable is at the same time a `DraggableItem` and a `dropTarget`. \u003cbr\u003e\u003cbr\u003e\n\n\u003e For more details, check out the [sample](https://github.com/MohamedRejeb/compose-dnd/tree/main/sample/common/src/commonMain/kotlin)\n\n\n### Enable/Disable Drag and Drop\n\nIf you want to enable/disable drag and drop functionality, you can use the `enabled` parameter in the `DragAndDropContainer` and `ReorderContainer` composable.\n\n```kotlin\nDragAndDropContainer(\n    state = dragAndDropState,\n    enabled = false\n) {\n\n}\n```\n\n```kotlin\nReorderContainer(\n    state = reorderState,\n    enabled = false\n) {\n\n}\n```\n\n\u003e This will disable the drag and drop functionality for all the draggable items.\n\nIf you want to disable drag and drop for a specific item, you can use the `enabled` parameter in the `DraggableItem` and `ReorderableItem` composable.\n\n```kotlin\nDraggableItem(\n    state = dragAndDropState,\n    key = task.id,\n    data = task,\n    enabled = false\n) {\n\n}\n```\n\n```kotlin\nReorderableItem(\n    state = reorderState,\n    key = task.id,\n    data = task,\n    onDrop = { state -\u003e\n        // Handle drop\n    },\n    enabled = false\n) {\n\n}\n```\n\n## Contribution\nIf you've found an error in this sample, please file an issue. \u003cbr\u003e\nFeel free to help out by sending a pull request :heart:.\n\n[Code of Conduct](https://github.com/MohamedRejeb/compose-dnd/blob/main/CODE_OF_CONDUCT.md)\n\n## Find this library useful? :heart:\nSupport it by joining __[stargazers](https://github.com/MohamedRejeb/compose-dnd/stargazers)__ for this repository. :star: \u003cbr\u003e\nAlso, __[follow me](https://github.com/MohamedRejeb)__ on GitHub for more libraries! 🤩\n\nYou can always \u003ca href=\"https://www.buymeacoffee.com/MohamedRejeb\"\u003e\u003cimg src=\"https://img.buymeacoffee.com/button-api/?text=Buy me a coffee\u0026emoji=\u0026slug=MohamedRejeb\u0026button_colour=FFDD00\u0026font_colour=000000\u0026font_family=Cookie\u0026outline_colour=000000\u0026coffee_colour=ffffff\"\u003e\u003c/a\u003e\n\n# License\n```\nCopyright 2023 Mohamed Rejeb\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   http://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%2Fmohamedrejeb%2Fcompose-dnd","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmohamedrejeb%2Fcompose-dnd","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmohamedrejeb%2Fcompose-dnd/lists"}