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.
See DragAndDrop for a usage guide and a complete example.
Properties
Section titled “Properties”enabled
Section titled “enabled” bool default: true
Set to false to stop the DragArea from starting drags.
Events still reach the child elements.
data-transfer default: an empty data-transfer
The payload that’s transferred to a DropArea when a drop happens.
drag-image
Section titled “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
Section titled “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
Section titled “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.
© 2026 SixtyFPS GmbH