Skip to main content

Drag (8.5)

Enables transferring data between and within applications per drag and drop.

modifier Drag

Example

import { Frame, Rectangle, Overlay, Drag, DragInfo, Text, DropAction } from ui

export component Main {
Rectangle(color: Color(0xFFFFFF00), radius: 4) with {
Frame(height: 128)
Overlay {
Text("Hello world")
}
Drag(start: fun (event) {
return DragInfo(
data: ["text/plain": "Ut queant laxis"],
supported_actions: [DropAction.copy, DropAction.move],
)
})
}
}

export var main = Main()

Constructor

constructor(start: (DragEvent) -> (DragInfo), complete: (DropAction) -> () = fun (_) {}, minimum_distance: Float = 10, children: Template() = template() {})
start: (DragEvent) -> (DragInfo)

Called when the drag starts, allowing you to set the data to be transferred in the returned DragInfo object.

See DragEvent, DragInfo.

complete: (DropAction) -> () = fun (_) {}

Called when the drag has finished. The DropAction parameter indicates the action that was performed by the target, e.g. DropAction.copy, DropAction.link or DropAction.move.

If the drag was cancelled, the action will be DropAction.cancel.

This callback is optional and can be omitted if you do not need to know the action performed by the target.

See DropAction.

minimum_distance: Float = 10

The minimum distance the cursor has to move after the tap down before the gesture starts responding.

This is important if the builders want to combine both TapGesture and Drag on the same component.

children: Template() = template() {}

The children to display at the cursor during the drag operation.

If the template is not specified, the children will be based on the OS and the data transferred.

Layout Behavior

None.