Compose Drag And Drop

Compose DND is a library that allows you to easily add drag and drop functionality to your Jetpack Compose or Compose Multiplatform projects.

Installation

Add the following dependency to your module build.gradle.kts file:

implementation("com.mohamedrejeb.dnd:compose-dnd:0.3.0")

Usage

Drag and Drop

To implement drag and drop functionality:

• Create a DragAndDropState with rememberDragAndDropState.

val dragAndDropState = rememberDragAndDropState()

• Add DragAndDropContainer composable which will wrap the draggable items.

DragAndDropContainer(
    state = dragAndDropState,
) {

}

• Add DraggableItem composable for each draggable item.

DraggableItem(
    state = dragAndDropState,
    key = task.id, // Unique key for each draggable item
    data = task, // Data to be passed to the drop target
) {

}

• Add Modifier.dropTarget for each drop target.

Modifier.dropTarget(
    state = dragAndDropState,
    key = task.id, // Unique key for each drop target
    onDrop = { state -> // Data passed from the draggable item
        // Handle drop
    }
)

For more details, check out the sample

Reorder List

To implement reorder list functionality:

• Create a ReorderState with rememberReorderState.

val reorderState = rememberReorderState()

• Add ReorderContainer composable which will wrap the reorderable items.

ReorderContainer(
    state = reorderState,
) {

}

• Add ReorderableItem composable for each reorderable item.

ReorderableItem(
    state = reorderState,
    key = task.id, // Unique key for each reorderable item
    data = task, // Data to be passed to the drop target
    onDrop = { state -> // Data passed from the draggable item
        // Handle drop
    }
) {

}

The ReorderableItem composable is at the same time a DraggableItem and a dropTarget.

For more details, check out the sample

Enable/Disable Drag and Drop

If you want to enable/disable drag and drop functionality, you can use the enabled parameter in the DragAndDropContainer and ReorderContainer composable.

DragAndDropContainer(
    state = dragAndDropState,
    enabled = false
) {

}

ReorderContainer(
    state = reorderState,
    enabled = false
) {

}

This will disable the drag and drop functionality for all the draggable items.

If you want to disable drag and drop for a specific item, you can use the enabled parameter in the DraggableItem and ReorderableItem composable.

DraggableItem(
    state = dragAndDropState,
    key = task.id,
    data = task,
    enabled = false
) {

}

ReorderableItem(
    state = reorderState,
    key = task.id,
    data = task,
    onDrop = { state ->
        // Handle drop
    },
    enabled = false
) {

}

Contribution

If you've found an error in this sample, please file an issue.
Feel free to help out by sending a pull request ❤️.

Code of Conduct

Find this library useful? ❤️

Support it by joining stargazers for this repository. ⭐
Also, follow me on GitHub for more libraries! 🤩

You can always

License

Copyright 2023 Mohamed Rejeb

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

   http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.