DragArea

Use DragArea to make any part of the UI draggable. A drag starts when the user presses the mouse inside the area and moves past a small threshold, and the value bound to data becomes the drag payload delivered to a DropArea. A click doesn’t start a drag, so child elements like TouchArea stay interactive.

The payload is a data-transfer value, which abstracts over the file-type transfer mechanisms supported by each platform. data-transfer values are opaque in Slint code: construct and read them via callbacks implemented in the host language.

The source declares which actions it permits via allow-copy, allow-move, and allow-link, and a preferred-action that applies when no modifier key is pressed. The target picks the final action from this set in its can-drop callback. Once a drop completes (or the drag is cancelled), drag-finished(action) fires so a “move” source can remove the original data.

See DragAndDrop for a usage guide and a complete example.

Properties

enabled

bool default: true

Set to false to stop the DragArea from starting drags. Events still reach the child elements.

data

data-transfer default: an empty data-transfer

The payload that’s transferred to a DropArea when a drop happens.

drag-image

image default: the empty image

Bitmap drawn under the cursor while a drag is in flight. When unset (the default empty image), no overlay is drawn.

drag-image-offset-x

int default: 0

Horizontal hotspot within drag-image that aligns with the cursor, in image pixel coordinates. 0 puts the image’s left edge at the cursor; following HTML5’s setDragImage(image, x, y) convention.

drag-image-offset-y

int default: 0

Vertical hotspot within drag-image that aligns with the cursor, in image pixel coordinates. 0 puts the image’s top edge at the cursor.

allow-copy

bool default: true

Whether the source allows the drop to copy the data. The source retains the data.

allow-move

bool default: false

Whether the source allows the drop to move the data. The source should remove the original from its model in the drag-finished callback when the action is move.

allow-link

bool default: false

Whether the source allows the drop to link to the data. Neither side gives up ownership.

preferred-action

enum DragAction default: copy

The action used when no modifier key is pressed. The runtime clamps it to the allowed set; if the named action isn’t allowed, falls back to the first allowed of move, copy, link.

DragAction

This enum describes the action negotiated between the source of a drag (DragArea) and its target (DropArea) during a drag-and-drop operation. The source declares which actions it permits, the target picks one in its can-drop callback, and the chosen action is reported back to the source via drag-finished so that, for example, a move source can remove the original data. The same enum is used for drags that come from another application or window once native drag-and-drop is in play.

• none: No action: the drag is rejected, no drop will be delivered.
• copy: The data is copied to the target; the source retains it.
• move: The data is moved to the target; the source should remove it once the operation completes.
• link: A link to the source data is created at the target; neither side gives up ownership.

dragging

bool (out) default: false

true once the press has crossed the drag threshold and a drag is in flight, false once the drop completes or the drag is cancelled.

Callbacks

drag-finished(action: DragAction)

Fires when the drag ends: with the chosen action on a successful drop, or with DragAction.none if the drag was cancelled.