dragAndDropSource

Modifier in Compose Foundation

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

Last updated: 2024-10-22 13:47

Installation

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

Overloads

fun Modifier.dragAndDropSource(transferData: (Offset) -> DragAndDropTransferData?): Modifier

Parameters

name	description
transferData	A function that receives the current offset of the drag operation and returns the [DragAndDropTransferData] to be transferred. If null is returned, the drag and drop transfer won't be started.

fun Modifier.dragAndDropSource(
    drawDragDecoration: DrawScope.() -> Unit,
    transferData: (Offset) -> DragAndDropTransferData?
): Modifier

Parameters

name	description
drawDragDecoration	provides the visual representation of the item dragged during the drag and drop gesture.
transferData	A function that receives the current offset of the drag operation and returns the [DragAndDropTransferData] to be transferred. If null is returned, the drag and drop transfer won't be started.

@Deprecated(
    message =
        "Replaced by overload with a callback for obtain a transfer data," +
            "start detection is performed by Compose itself",
    replaceWith = ReplaceWith("Modifier.dragAndDropSource(transferData)")
)
@ExperimentalFoundationApi
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].

@Deprecated(
    message =
        "Replaced by overload with a callback for obtain a transfer data," +
            "start detection is performed by Compose itself",
    replaceWith = ReplaceWith("Modifier.dragAndDropSource(transferData)")
)
@ExperimentalFoundationApi
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].

Code Examples

TextDragAndDropSourceSample

@Composable
fun TextDragAndDropSourceSample(modifier: Modifier) {
    val label = remember { "Drag me" }
    Box(
        modifier =
            modifier
                .dragAndDropSource { _ ->
                    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
fun DragAndDropSourceWithColoredDragShadowSample(color: Color) {
    Box(
        modifier =
            Modifier.size(56.dp).background(color = color).dragAndDropSource(
                drawDragDecoration = { drawRect(color) },
            ) { _ ->
                color.toDragAndDropTransfer()
            }
    )
}