Relative position of Draggable child item when parent resized

Mammamia

I have a scenario in which I have a drag-able component(Rectangle) on a main window.

Initially the application is of size 320x480 and the rectangle is dragged to the bottom right corner of the window.

When I resize the window or make it fullscreen then I could see that the Rectangle is at same position in the fullscreen window.

The mentioned functionality can be done by anchoring it to the right but I could not use it as I need to drag the item around.

? Offline

Hi! I'm pretty sure you have to do this manually, e.g.:

main.qml

import QtQuick 2.7
import QtQuick.Controls 2.0
import QtQuick.Layouts 1.3

ApplicationWindow {
    visible: true
    width: 640
    height: 480
    color: "black"

    DropArea {
        id: dropArea
        anchors.fill: parent
    }

    MyRect {
        color: "orange"
        theDropArea: dropArea
    }

    MyRect {
        color: "purple"
        theDropArea: dropArea
    }
}

MyRect.qml

import QtQuick 2.7

Rectangle {
    id: myrect

    property var theDropArea: null
    property real relativeX: 0
    property real relativeY: 0

    width: 50
    height: 50
    onXChanged: relativeX = x / theDropArea.width
    onYChanged: relativeY = y / theDropArea.height

    Drag.active: mouseArea.drag.active
    Drag.hotSpot.x: width / 2
    Drag.hotSpot.y: height / 2

    MouseArea {
        id: mouseArea
        anchors.fill: parent
        drag.target: parent
    }

    Connections {
        target: myrect.theDropArea
        onWidthChanged: myrect.x = myrect.theDropArea.width * myrect.relativeX
        onHeightChanged: myrect.y = myrect.theDropArea.height * myrect.relativeY
    }
}

Mammamia

@Wieland Thanks alot for the snippet. This is almost what I want. I need to give it a try to my application.