How the position offsets do not return to initial values after pressing the button?

morita

Hello.

I want to make a virtual joystick. When I pressed a circle button, I try to change positions using mouseX and mouseY
of MouseArea. So I changed the CenterOffsets of the button. But I have a problem that the position offsets return to initial values.
The initial values are (0,0). That is why I see the button is swung when I pressed it every time.
Do you have any solutions to how the position offsets do not return to initial values after pressing the button?

The following is my code.

import QtQuick 2.1
import QtQuick.Controls 2.1
import "../components"
Rectangle {
id: root
width:150
height:150
color: "green"

signal joystick_moved(double x, double y);

Image {
    id: joystick

    source: "./../assets/joystick_base.png"
    anchors.centerIn: root
}

Rectangle {
    id: thumb
    anchors.centerIn: parent

    width:50
    height:50
    radius: width/2
    border.width: 3
    anchors.verticalCenterOffset: 0
    anchors.horizontalCenterOffset: 0

    MouseArea {
        id: mouse
         anchors.fill: thumb
        property int mcx : mouseX
        property int mcy : mouseY

        onPositionChanged: {
            thumb.anchors.horizontalCenterOffset = mouseX
            thumb.anchors.verticalCenterOffset = mouseY
            console.log("mouseX:" + mouseX + "mouseY:" + mouseY)
            console.log("mcx:" + thumb.anchors.horizontalCenterOffset
                        + "mcy:" + thumb.anchors.verticalCenterOffset)
        }
    }

}

}