dragAndDropSource

Modifier in Compose Foundation

A Modifier that allows an element it is applied to to be treated like a source for drag and drop operations.

Last updated: 2024-09-07 14:23

Installation

dependencies {
   implementation("androidx.compose.foundation:foundation:1.8.0-alpha01")
}

Overloads

fun Modifier.dragAndDropSource(
    drawDragDecoration: DrawScope.() -> Unit,
    block: suspend DragAndDropSourceScope.() -> Unit
): Modifier

Parameters

name	description
drawDragDecoration	provides the visual representation of the item dragged during the drag and drop gesture.
block	A lambda with a [DragAndDropSourceScope] as a receiver which provides a [PointerInputScope] to detect the drag gesture, after which a drag and drop gesture can be started with [DragAndDropSourceScope.startTransfer].

fun Modifier.dragAndDropSource(block: suspend DragAndDropSourceScope.() -> Unit): Modifier

Parameters

name	description
block	A lambda with a [DragAndDropSourceScope] as a receiver which provides a [PointerInputScope] to detect the drag gesture, after which a drag and drop gesture can be started with [DragAndDropSourceScope.startTransfer].

Code Examples

DragAndDropSourceWithColoredDragShadowSample

@Composable
fun DragAndDropSourceWithColoredDragShadowSample(color: Color) {
    Box(
        modifier =
            Modifier.size(56.dp).background(color = color).dragAndDropSource(
                drawDragDecoration = { drawRect(color) },
            ) {
                detectTapGestures(onLongPress = { startTransfer(color.toDragAndDropTransfer()) })
            }
    )
}

TextDragAndDropSourceSample

@Composable
fun TextDragAndDropSourceSample(modifier: Modifier) {
    val label = remember { "Drag me" }
    Box(
        modifier =
            modifier
                .dragAndDropSource {
                    detectTapGestures(
                        onLongPress = {
                            startTransfer(
                                DragAndDropTransferData(
                                    clipData = ClipData.newPlainText(label, label),
                                    flags = View.DRAG_FLAG_GLOBAL,
                                )
                            )
                        }
                    )
                }
                .border(
                    border =
                        BorderStroke(
                            width = 4.dp,
                            brush = Brush.linearGradient(listOf(Color.Magenta, Color.Magenta))
                        ),
                    shape = RoundedCornerShape(16.dp)
                )
                .padding(24.dp),
    ) {
        Text(modifier = Modifier.align(Alignment.Center), text = label)
    }
}