Important: Please read the Qt Code of Conduct -

Relative position of Draggable child item when parent resized

  • 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.


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


    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


    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.hotSpot.x: width / 2
        Drag.hotSpot.y: height / 2
        MouseArea {
            id: mouseArea
            anchors.fill: parent
        Connections {
            target: myrect.theDropArea
            onWidthChanged: myrect.x = myrect.theDropArea.width * myrect.relativeX
            onHeightChanged: myrect.y = myrect.theDropArea.height * myrect.relativeY

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

Log in to reply