New Compose Multiplatform components arrived on Composables UICheck it out →

Modifier in Compose Foundation

dragAndDropSource

Android
Common

A Modifier that allows an element it is applied to to be treated like a source for drag and drop operations. It displays the element dragged as a drag shadow.

Last updated:

Installation

dependencies {
   implementation("androidx.compose.foundation:foundation:1.7.0-beta04")
}

Overloads

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

Parameters

namedescription
blockA 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].
@ExperimentalFoundationApi
fun Modifier.dragAndDropSource(
    drawDragDecoration: DrawScope.() -> Unit,
    block: suspend DragAndDropSourceScope.() -> Unit
)

Parameters

namedescription
drawDragDecorationprovides the visual representation of the item dragged during the drag and drop gesture.
blockA 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

TextDragAndDropSourceSample

@Composable
@Sampled
@OptIn(ExperimentalFoundationApi::class
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
        )
    }
}

DragAndDropSourceWithColoredDragShadowSample

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