New Compose Multiplatform components arrived on Composables UICheck it out →

Modifier in Compose Foundation

dragAndDropTarget

Common

A modifier that allows for receiving from a drag and drop gesture.

Last updated:

Installation

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

Overloads

@ExperimentalFoundationApi
fun Modifier.dragAndDropTarget(
    shouldStartDragAndDrop: (startEvent: DragAndDropEvent) -> Boolean,
    target: DragAndDropTarget,
)

Parameters

namedescription
shouldStartDragAndDropAllows the Composable to decide if it wants to receive from a given drag and drop session by inspecting the [DragAndDropEvent] that started the session.
targetThe [DragAndDropTarget] that will receive events for a given drag and drop session.

Code Example

TextDragAndDropTargetSample

@Composable
@Sampled
@OptIn(ExperimentalFoundationApi::class
fun TextDragAndDropTargetSample(
    eventSummary: String?,
    onDragAndDropEventDropped: (DragAndDropEvent) -> Unit,
) {
    val validMimeTypePrefixes = remember {
        setOf(
            ClipDescription.MIMETYPE_TEXT_INTENT,
            "image/",
            "text/",
            "video/",
            "audio/",
        )
    }
    var backgroundColor by remember { mutableStateOf(Color.Transparent) }
    Box(
        modifier = Modifier
            .fillMaxSize()
            .dragAndDropTarget(
                shouldStartDragAndDrop = accept@{ startEvent ->
                    val hasValidMimeType = startEvent
                        .mimeTypes()
                        .any { eventMimeType ->
                            validMimeTypePrefixes.any(eventMimeType::startsWith)
                        }
                    hasValidMimeType
                },
                target = object : DragAndDropTarget {
                    override fun onStarted(event: DragAndDropEvent) {
                        backgroundColor = Color.DarkGray.copy(alpha = 0.2f)
                    }

                    override fun onDrop(event: DragAndDropEvent): Boolean {
                        onDragAndDropEventDropped(event)
                        return true
                    }

                    override fun onEnded(event: DragAndDropEvent) {
                        backgroundColor = Color.Transparent
                    }
                },
            )
            .background(backgroundColor)
            .border(
                width = 4.dp,
                color = Color.Magenta,
                shape = RoundedCornerShape(16.dp)
            ),
    ) {
        when (eventSummary) {
            null -> Text(
                modifier = Modifier
                    .align(Alignment.Center),
                text = "Drop anything here"
            )

            else -> Text(
                modifier = Modifier
                    .padding(
                        horizontal = 16.dp,
                        vertical = 24.dp
                    )
                    .verticalScroll(rememberScrollState()),
                text = eventSummary
            )
        }
    }
}