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

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

Rust

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

C++

// `DataTransfer` is currently not fully implemented in C++

C++

NodeJS

import * as slint from "slint-ui";

const ui = slint.loadFile(new URL("example.slint", import.meta.url));
const window = new ui.Example();

window.Api.string_to_transfer = (text) => {
    const transfer = new slint.DataTransfer();
    transfer.setPlaintext(text);
    return transfer;
};

// A helper for reading plaintext from a `DataTransfer` is also supplied.
window.Api.transfer_to_string = (data) => data.fetchPlaintext() ?? "";

// This helper abstracts over various "plaintext" MIME types
window.Api.can_drop = (data) => data.hasPlaintext;

js

Python

import slint
from slint import DataTransfer

class App(slint.loader.example.Example):

    @slint.callback(global_name="Api", name="string-to-transfer")
    def string_to_transfer(self, text: str) -> DataTransfer:
        transfer = DataTransfer()
        transfer.set_plaintext(text)
        return transfer

    # A helper for reading plaintext from a `DataTransfer` is also supplied.
    @slint.callback(global_name="Api", name="transfer-to-string")
    def transfer_to_string(self, data: DataTransfer) -> str:
        return data.fetch_plaintext() or ""

    # This helper abstracts over various "plaintext" MIME types
    @slint.callback(global_name="Api", name="can-drop")
    def can_drop(self, data: DataTransfer) -> bool:
        return data.has_plaintext

python