Skip to content
Slint Docs

Drag and Drop

Use DragArea and DropArea to move data between parts of the UI with a drag-and-drop gesture. On platforms that support it, a DropArea also accepts drops from other applications.

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.

Example

Section titled “Example”
export global Api {
    pure callback string-to-transfer(string) -> data-transfer;
    pure callback transfer-to-string(data-transfer) -> string;
    pure callback can-drop(data-transfer) -> bool;
}


export component Example inherits Window {
    width: 300px;
    height: 200px;


    VerticalLayout {
        spacing: 8px;
        padding: 8px;


        Rectangle {
            background: #f0c000;
            DragArea {
                data: Api.string-to-transfer("Hello World");
            }
            Text { text: "Drag me"; }
        }


        Rectangle {
            background: drop.contains-drag ? #80e080 : #a0a0a0;
            drop := DropArea {
                can-drop(event) => {
                    Api.can-drop(event.data)
                }
                dropped(event) => {
                    debug("Got: ", Api.transfer-to-string(event.data));
                }
            }
            Text { text: "Drop here"; }
        }
    }
}
slint
fn main() {
    let app = Example::new();
    // For simple plaintext and image transfers, a simple conversion is supplied
    // which handles the common case.
    let api = app.global::<Api>();
    api.on_string_to_transfer(Into::into);
    // A helper for reading plaintext from a `DataTransfer` is also supplied.
    api.on_transfer_to_string(|data| data.fetch_plaintext().unwrap_or_default());
    api.on_can_drop(|data| {
        // This helper abstracts over various "plaintext" MIME types
        data.has_plaintext()
    });
    // ...
}
rust

© 2026 SixtyFPS GmbH