QML: Move the rectangle outside the window

Question

Is it possible to move the rectangle outside the window? The only thing I came up with is to write custom logic that will resize the top window when moving the rectangle outside the window.

Current behavior (imgur .gif):

Current behavior

Desired behavior (imgur .png):

Desired behavior

main.qml

import QtQuick 2.15
import QtQuick.Window 2.15

Window {
    id: root
    width: 300
    height: 500
    visible: true
    flags: Qt.ToolTip | Qt.FramelessWindowHint | Qt.WA_TranslucentBackground
    color: "#00000000"

    Rectangle {
        id: draggable
        color: "blue"
        x: 100
        y: 100
        width: 100
        height: 100

        MouseArea {
            anchors.fill: parent

            property real lastMouseX: 0
            property real lastMouseY: 0

            onPressed: {
                lastMouseX = mouseX
                lastMouseY = mouseY
            }

            onMouseXChanged: {
                draggable.x += (mouseX - lastMouseX)
            }

            onMouseYChanged: {
                draggable.y += (mouseY - lastMouseY)
            }
        }
    }

    Rectangle {
        color: "blue"
        x: 100
        y: 300
        width: 100
        height: 100

        // ...
    }
}

Answer 1

Windows can be children of other Windows. The Window behavior is still subject to certain platform-dependent behavior, but on a Desktop environment child Windows should still be able to move outside the parent Window. So simply changing your Rectangle to be a Window will give you the desired effect.

Window {
    id: root

    Window {
        id: draggable
        ...
    }
}